collection-attribute-filter.css.map — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / collection-attribute-filter.css.map
woocommerce / assets / client / blocks Last commit date
collection-attribute-filter.css.map
1 lines
{"version":3,"file":"collection-attribute-filter.css","mappings":"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EACC;EACA,gBdvJO;EcwJP;EACA,4HblGgB;EamGhB,kBb5EiB;AQ8IlB;AK/DC;EACC;EACA;ALiEF;AK9DC;EACC;EACA;EACA;ALgEF;AK7DC;EACC;EACA;EACA;EACA;EACA;EACA;AL+DF;AK5DC;EACC;AL8DF;AK3DC;EACC;EACA;AL6DF;AK1DC;EACC;EACA;AL4DF;AKzDC;EACC;AL2DF;AKxDC;EACC;EACA;AL0DF;AKvDC;EACC;ALyDF;AKrDA;EACC;EACA,gBd/MO;EcgNP;EACA,Yb3Lc;Ea4Ld;EACA;ALuDD;AKpDA;EACC;EACA;EACA;EACA;ALsDD;AKnDA;EACC;ALqDD;AMnSA;EACC;ANqSD;AMnSC;EACC;ANqSF;AMjSA;EACC,mBfDU;EeEV,kBdoFiB;EcnFjB;EACA,WfIO;EeHP;EACA;EACA;EACA;EACA;ANmSD;AMjSC;EACC;ANmSF;AM/RA;EACC;EACA,gBdMc;AQ2Rf;AM9RA;EACC;ANgSD;AM/RC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ANiSF;AOxUA;EH+MC,gIZjMc;EYkMd;EAtIA;EACA;EACA,kBZkBiB;EYjBjB;EAsIA;EACA,eZ9L2B;EY+L3B;EACA;EGpNA;EACA;EACA;EACA;EACA;EACA;EACA;APmVD;AIhKE;EG3LF;IH4LG;IACA;EJmKD;AACF;AIrTC;EG5CD;IHwNE,eZzMkB;IY0MlB;IACA;EJ6IA;AACF;AI3IC;EA1IA;EAEA;EAEA;AJsRD;AI3IC;EACC,6Bb/MsB;AS4VxB;AI1IC;EACC;EACA,6BbpNsB;ASgWxB;AIzIC;EACC,6BbxNsB;ASmWxB;AO5WC;EACC,gBhBCS;EgBAT;AP8WF;AO3WC;EHmEA;EAEA;EAEA;AJySD;AO3WC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,chBzBS;EgB0BT;AP6WF;AInWC;EGvBA;IAkBE;EP4WD;AACF;AO1WE;EAEC;EACA;AP2WH;AOxWC;EACC;AP0WF;AOtWA;EACC;EACA,kBfxBc;AQgYf;AOrWA;EACC,efiCoB;EehCpB;EACA,chBnDU;AS0ZX;AOnWA;EACC,efnDmB;EeoDnB;EACA;EACA,chB7DU;EgB8DV;APqWD;AOlWE;;EAEC,mBhBhDW;ASoZd;AO/VE;;EAEC,mBhBxDS;ASyZZ;AO5VE;;EAEC,chB/EQ;AS6aX;AO1VC;EACC;EACA;AP4VF;AO1VE;EACC;EACA;AP4VH;AOzVE;EACC;EACA,chB9FQ;EgB+FR;EACA;EACA;AP2VH;AOvVG;EACC,chBrFU;AS8ad;AOpVG;EACC,chB5FQ;EgB6FR;EACA;APsVJ;AOjVG;EACC,chBtHO;ASycX;AO7UE;EACC;AP+UH;AO1UA;;EAEC;EACA;EACA;EACA,gBhBlIU;EgBmIV;EACA;AP4UD;AIxRE;EG3DF;;IH4DG;IACA;IACA;IACA;EJ4RD;AACF;AOjVA;EACC;EACA;EACA;EACA;EACA;APmVD;AOhVA;EACC;EACA;EACA;EACA,chBzJU;EgB0JV;EACA;APkVD;AOhVC;EACC,chB9JS;ASgfX;AO7UA;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;AP8UD;AIxUE;EGhBF;IHiBG;IACA;EJ2UD;AACF;AOjVA;EACC,chB/KU;EgBgLV;EACA,ef5KmB;Ee6KnB;EACA;EACA;APmVD;AOjVC;EACC;EACA,WhBlLM;ASqgBR;AO/UA;EACC;APiVD;;AAthBA;EACC,qBTQU;ASihBX;AAvhBC;;EN6EA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AM8cD;AAjiBC;;EAEC;EACA;EACA;AAmiBF;AAhiBC;EACC;EACA;EACA;EACA;EACA;AAkiBF;AAhiBE;EACC;AAkiBH;AA9hBC;;EAEC,mBTjBS;ASijBX;AA7hBC;EACC;AA+hBF;AA5hBC;EACC,sBTvBM;ESwBN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA8hBF;AA5hBE;EACC;AA8hBH;AA1hBC;EACC;AA4hBF;AA1hBE;EACC,mBT3CQ;ES4CR,cTlDQ;AS8kBX;AAvhBE;EACC;EACA;EACA;EACA;AAyhBH;AAthBE;;EAEC;AAwhBH;AArhBE;EACC;EACA;AAuhBH;AAphBE;EACC;AAshBH;AAnhBE;EACC;EACA;EACA;EACA;AAqhBH,C;;;;AV9mBA;;;;;CAAA;ACEA;;EAAA;ACFA;;;;;;EAAA;AFAA;;;;;CAAA;ACEA;;EAAA;ACQA;;EAAA;AAeA;;;EAAA;AAiBA;;EAAA;AAyBA;;EAAA;AAOA;;EAAA;AAUA;;EAAA;AAkBA;;EAAA;AASA;;;EAAA;AC/GA;AA6DA;AC/CA;EACC;IACC;IACA;EcwCA;EdtCD;IACC;EcwCA;AACF;AdrCA;EACC;IACC;EcuCA;AACF;AAjEC;EACC;AAmEF;AAjEC;EACC;AAmEF,C","sources":["webpack://wc/../../node_modules/.pnpm/@wordpress+base-styles@4.35.0/node_modules/@wordpress/base-styles/_functions.scss","webpack://wc/../../node_modules/.pnpm/@wordpress+base-styles@4.35.0/node_modules/@wordpress/base-styles/_colors.scss","webpack://wc/../../node_modules/.pnpm/@wordpress+base-styles@4.35.0/node_modules/@wordpress/base-styles/_variables.scss","webpack://wc/./assets/css/abstracts/_breakpoints.scss","webpack://wc/./assets/css/abstracts/_mixins.scss","webpack://wc/./assets/js/blocks/collection-filters/inner-blocks/attribute-filter/style.scss","webpack://wc/./packages/components/checkbox-list/style.scss","webpack://wc/./packages/components/checkbox-control/style.scss","webpack://wc/./assets/css/abstracts/_variables.scss","webpack://wc/./assets/css/abstracts/_colors.scss","webpack://wc/./assets/js/base/components/form-token-field/style.scss","webpack://wc/./assets/js/base/components/form-token-field/vendor.scss","webpack://wc/../../node_modules/.pnpm/@wordpress+base-styles@4.35.0/node_modules/@wordpress/base-styles/_breakpoints.scss","webpack://wc/../../node_modules/.pnpm/@wordpress+base-styles@4.35.0/node_modules/@wordpress/base-styles/_long-content-fade.scss","webpack://wc/../../node_modules/.pnpm/@wordpress+base-styles@4.35.0/node_modules/@wordpress/base-styles/_mixins.scss","webpack://wc/../../node_modules/.pnpm/@wordpress+components@14.2.0_@types+react@17.0.71_react-dom@17.0.2_react-with-direction@1.4.0_g43nmvk3ohn3r3z6u5eunaboqa/node_modules/@wordpress/components/src/popover/style.scss","webpack://wc/../../node_modules/.pnpm/@wordpress+components@14.2.0_@types+react@17.0.71_react-dom@17.0.2_react-with-direction@1.4.0_g43nmvk3ohn3r3z6u5eunaboqa/node_modules/@wordpress/components/src/tooltip/style.scss","webpack://wc/../../node_modules/.pnpm/@wordpress+components@14.2.0_@types+react@17.0.71_react-dom@17.0.2_react-with-direction@1.4.0_g43nmvk3ohn3r3z6u5eunaboqa/node_modules/@wordpress/components/src/form-token-field/style.scss","webpack://wc/./assets/js/base/components/filter-element-label/style.scss"],"sourcesContent":["/**\n*  Converts a hex value into the rgb equivalent.\n*\n* @param {string} hex - the hexadecimal value to convert\n* @return {string} comma separated rgb values\n*/\n@function hex-to-rgb($hex) {\n\t@return red($hex), green($hex), blue($hex);\n}\n","@import \"./functions\";\n\n/**\n * Colors\n */\n\n// WordPress grays.\n$black: #000;\t\t\t// Use only when you truly need pure black. For UI, use $gray-900.\n$gray-900: #1e1e1e;\n$gray-800: #2f2f2f;\n$gray-700: #757575;\t\t// Meets 4.6:1 text contrast against white.\n$gray-600: #949494;\t\t// Meets 3:1 UI or large text contrast against white.\n$gray-400: #ccc;\n$gray-300: #ddd;\t\t// Used for most borders.\n$gray-200: #e0e0e0;\t\t// Used sparingly for light borders.\n$gray-100: #f0f0f0;\t\t// Used for light gray backgrounds.\n$white: #fff;\n\n// Opacities & additional colors.\n$dark-theme-focus: $white;\t// Focus color when the theme is dark.\n$dark-gray-placeholder: rgba($gray-900, 0.62);\n$medium-gray-placeholder: rgba($gray-900, 0.55);\n$light-gray-placeholder: rgba($white, 0.65);\n\n// Alert colors.\n$alert-yellow: #f0b849;\n$alert-red: #cc1818;\n$alert-green: #4ab866;\n","/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n\n@import \"./colors\";\n\n/**\n * Fonts & basic variables.\n */\n\n$default-font: -apple-system, BlinkMacSystemFont,\"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell,\"Helvetica Neue\", sans-serif;\n$default-font-size: 13px;\n$default-line-height: 1.4;\n$editor-html-font: Menlo, Consolas, monaco, monospace;\n$editor-font-size: 16px;\n$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.\n$text-editor-font-size: 15px;\n$editor-line-height: 1.8;\n$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to \"zoom in\".\n\n\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n\n$grid-unit: 8px;\n$grid-unit-05: 0.5 * $grid-unit;\t// 4px\n$grid-unit-10: 1 * $grid-unit;\t\t// 8px\n$grid-unit-15: 1.5 * $grid-unit;\t// 12px\n$grid-unit-20: 2 * $grid-unit;\t\t// 16px\n$grid-unit-30: 3 * $grid-unit;\t\t// 24px\n$grid-unit-40: 4 * $grid-unit;\t\t// 32px\n$grid-unit-50: 5 * $grid-unit;\t\t// 40px\n$grid-unit-60: 6 * $grid-unit;\t\t// 48px\n$grid-unit-70: 7 * $grid-unit;\t\t// 56px\n$grid-unit-80: 8 * $grid-unit;\t\t// 64px\n\n/**\n * Dimensions.\n */\n\n$icon-size: 24px;\n$button-size: 36px;\n$button-size-next-default-40px: 40px; // transitionary variable for next default button size\n$button-size-small: 24px;\n$button-size-compact: 32px;\n$header-height: 60px;\n$panel-header-height: $grid-unit-60;\n$nav-sidebar-width: 360px;\n$admin-bar-height: 32px;\n$admin-bar-height-big: 46px;\n$admin-sidebar-width: 160px;\n$admin-sidebar-width-big: 190px;\n$admin-sidebar-width-collapsed: 36px;\n$modal-min-width: 350px;\n$modal-width-small: 384px;\n$modal-width-medium: 512px;\n$modal-width-large: 840px;\n$spinner-size: 16px;\n$canvas-padding: $grid-unit-30;\n\n\n/**\n * Shadows.\n */\n\n$shadow-popover: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);\n$shadow-modal: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);\n\n/**\n * Editor widths.\n */\n\n$sidebar-width: 280px;\n$content-width: 840px;\n$wide-content-width: 1100px;\n$widget-area-width: 700px;\n\n\n/**\n * Block & Editor UI.\n */\n\n$block-toolbar-height: $grid-unit-60;\n$border-width: 1px;\n$border-width-focus-fallback: 2px; // This exists as a fallback, and is ideally overridden by var(--wp-admin-border-width-focus) unless in some SASS math cases.\n$border-width-tab: 1.5px;\n$helptext-font-size: 12px;\n$radius-round: 50%;\n$radius-block-ui: 2px;\n$radio-input-size: 20px;\n$radio-input-size-sm: 24px; // Width & height for small viewports.\n\n// Deprecated, please avoid using these.\n$block-padding: 14px; // Used to define space between block footprint and surrouding borders.\n\n\n/**\n * Block paddings.\n */\n\n// Padding for blocks with a background color (e.g. paragraph or group).\n$block-bg-padding--v: 1.25em;\n$block-bg-padding--h: 2.375em;\n\n\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n\n// Dimensions.\n$mobile-header-toolbar-height: 44px;\n$mobile-header-toolbar-expanded-height: 52px;\n$mobile-floating-toolbar-height: 44px;\n$mobile-floating-toolbar-margin: 8px;\n$mobile-color-swatch: 48px;\n\n// Block UI.\n$mobile-block-toolbar-height: 44px;\n$dimmed-opacity: 1;\n$block-edge-to-content: 16px;\n$solid-border-space: 12px;\n$dashed-border-space: 6px;\n$block-selected-margin: 3px;\n$block-selected-border-width: 1px;\n$block-selected-padding: 0;\n$block-selected-child-margin: 5px;\n$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;\n","/* stylelint-disable block-closing-brace-newline-after */\n\n// Breakpoints\n// Forked from https://github.com/Automattic/wp-calypso/blob/46ae24d8800fb85da6acf057a640e60dac988a38/assets/stylesheets/shared/mixins/_breakpoints.scss\n\n// Think very carefully before adding a new breakpoint.\n// The list below is based on wp-admin's main breakpoints\n// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage\n$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;\n\n// @todo refactor breakpoints so they use the mixins from Gutenberg\n// https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss\n@mixin breakpoint($sizes...) {\n\t@each $size in $sizes {\n\t\t@if type-of($size) == string {\n\t\t\t$approved-value: 0;\n\t\t\t@each $breakpoint in $breakpoints {\n\t\t\t\t$and-larger: \">\" + $breakpoint;\n\t\t\t\t$and-smaller: \"<\" + $breakpoint;\n\n\t\t\t\t@if $size == $and-smaller {\n\t\t\t\t\t$approved-value: 1;\n\t\t\t\t\t@media (max-width: $breakpoint) {\n\t\t\t\t\t\t@content;\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@if $size == $and-larger {\n\t\t\t\t\t\t$approved-value: 2;\n\t\t\t\t\t\t@media (min-width: $breakpoint + 1) {\n\t\t\t\t\t\t\t@content;\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@each $breakpoint-end in $breakpoints {\n\t\t\t\t\t\t\t$range: $breakpoint + \"-\" + $breakpoint-end;\n\t\t\t\t\t\t\t@if $size == $range {\n\t\t\t\t\t\t\t\t$approved-value: 3;\n\t\t\t\t\t\t\t\t@media (min-width: $breakpoint + 1) and (max-width: $breakpoint-end) {\n\t\t\t\t\t\t\t\t\t@content;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if $approved-value == 0 {\n\t\t\t\t$sizes: \"\";\n\t\t\t\t@each $breakpoint in $breakpoints {\n\t\t\t\t\t$sizes: $sizes + \" \" + $breakpoint;\n\t\t\t\t}\n\t\t\t\t@warn \"ERROR in breakpoint(#{ $size }) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]\";\n\t\t\t}\n\t\t} @else {\n\t\t\t$sizes: \"\";\n\t\t\t@each $breakpoint in $breakpoints {\n\t\t\t\t$sizes: $sizes + \" \" + $breakpoint;\n\t\t\t}\n\t\t\t@error \"ERROR in breakpoint(#{ $size }) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]\";\n\t\t}\n\t}\n}\n\n/* stylelint-enable */\n","$fontSizes: (\n\t\"smaller\": 0.75,\n\t\"small\": 0.875,\n\t\"regular\": 1,\n\t\"large\": 1.25,\n\t\"larger\": 2,\n);\n\n// Maps a named font-size to its predefined size. Units default to em, but can\n// be changed using the multiplier parameter.\n@mixin font-size($sizeName, $multiplier: 1em) {\n\tfont-size: map.get($fontSizes, $sizeName) * $multiplier;\n}\n\n@keyframes spinner__animation {\n\t0% {\n\t\tanimation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes loading__animation {\n\t100% {\n\t\ttransform: translateX(100%);\n\t}\n}\n\n// Adds animation to placeholder section\n@mixin placeholder($include-border-radius: true) {\n\toutline: 0 !important;\n\tborder: 0 !important;\n\tbackground-color: currentColor !important;\n\tcolor: currentColor !important;\n\twidth: 100%;\n\t@if $include-border-radius == true {\n\t\tborder-radius: 0.25rem;\n\t}\n\tdisplay: block;\n\tline-height: 1;\n\tposition: relative !important;\n\toverflow: hidden !important;\n\tmax-width: 100% !important;\n\tpointer-events: none;\n\tbox-shadow: none;\n\tz-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n\topacity: 0.15;\n\n\t// Forces direct descendants to keep layout but lose visibility.\n\t> * {\n\t\tvisibility: hidden;\n\t}\n\n\t&::after {\n\t\tcontent: \" \";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 0;\n\t\theight: 100%;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-image: linear-gradient(90deg, currentColor, #f5f5f54d, currentColor);\n\t\ttransform: translateX(-100%);\n\t\tanimation: loading__animation 1.5s ease-in-out infinite;\n\t}\n\n\t@media screen and (prefers-reduced-motion: reduce) {\n\t\tanimation: none;\n\t}\n}\n\n@mixin force-content() {\n\t&::before {\n\t\tcontent: \"\\00a0\";\n\t}\n}\n\n// Hide an element from sighted users, but available to screen reader users.\n@mixin visually-hidden() {\n\tborder: 0;\n\tclip: rect(1px, 1px, 1px, 1px);\n\tclip-path: inset(50%);\n\theight: 1px;\n\twidth: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\t/* Many screen reader and browser combinations announce broken words as they would appear visually. */\n\toverflow-wrap: normal !important;\n\tword-wrap: normal !important;\n\tpadding: 0;\n\tposition: absolute !important;\n}\n\n@mixin visually-hidden-focus-reveal() {\n\tbackground-color: #fff;\n\tborder-radius: 3px;\n\tbox-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);\n\tclip: auto !important;\n\tclip-path: none;\n\tcolor: $input-text-active;\n\tdisplay: block;\n\tfont-size: 0.875rem;\n\tfont-weight: 700;\n\theight: auto;\n\tleft: 5px;\n\tline-height: normal;\n\tpadding: 15px 23px 14px;\n\ttext-decoration: none;\n\ttop: 5px;\n\twidth: auto;\n\tz-index: 100000;\n}\n\n@mixin reset-box() {\n\tborder: 0;\n\tborder-radius: 0;\n\tmargin: 0;\n\tpadding: 0;\n\tvertical-align: baseline;\n}\n\n@mixin reset-color() {\n\tcolor: inherit;\n}\n\n@mixin reset-typography() {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tfont-style: inherit;\n\tfont-weight: inherit;\n\tletter-spacing: inherit;\n\tline-height: inherit;\n\ttext-decoration: inherit;\n\ttext-transform: inherit;\n}\n\n// Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.\n@mixin text-heading() {\n\t@include reset-box();\n\t@include reset-color();\n\t@include reset-typography();\n\tbox-shadow: none;\n\tdisplay: inline;\n\n\tbackground: transparent;\n}\n\n// Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.\n@mixin text-button() {\n\t@include reset-box();\n\t@include reset-color();\n\t@include reset-typography();\n\tbackground: transparent;\n\tbox-shadow: none;\n\tdisplay: inline;\n\ttext-shadow: none;\n\n\t&:hover,\n\t&:focus,\n\t&:active {\n\t\tbackground: transparent;\n\t}\n}\n\n// Reset <button> style so we can use link style for action buttons.\n@mixin link-button() {\n\t@include text-button();\n\ttext-decoration: underline;\n}\n\n@mixin hover-effect() {\n\t&:hover {\n\t\ttext-decoration: none;\n\t\tcolor: inherit;\n\t\tcursor: pointer;\n\t}\n}\n\n// Reset <button> style so we can use link style for action buttons in filter blocks\n@mixin filter-link-button() {\n\t@include link-button();\n\t@include hover-effect();\n\t@include font-size(small);\n\ttext-decoration: underline;\n\tfont-weight: normal;\n\tcolor: inherit;\n}\n\n// Makes sure long words are broken if they overflow the container.\n@mixin wrap-break-word() {\n\t// This is the current standard, works in most browsers.\n\toverflow-wrap: anywhere;\n\t// Safari supports word-break.\n\tword-break: break-word;\n\t// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.\n\t-ms-word-break: break-all;\n}\n\n// Add support for content alignment classes\n@mixin with-alignment() {\n\t// Apply max-width to floated items that have no intrinsic width\n\t&.alignleft,\n\t&.alignright {\n\t\tmax-width: $content-width * 0.5;\n\t\twidth: 100%;\n\t}\n\n\t// Using flexbox without an assigned height property breaks vertical center alignment in IE11.\n\t// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.\n\t&::after {\n\t\tdisplay: block;\n\t\tcontent: \"\";\n\t\tfont-size: 0;\n\t\tmin-height: inherit;\n\n\t\t// IE doesn't support flex so omit that.\n\t\t@supports (position: sticky) {\n\t\t\tcontent: none;\n\t\t}\n\t}\n\n\t// Aligned cover blocks should not use our global alignment rules\n\t&.aligncenter,\n\t&.alignleft,\n\t&.alignright {\n\t\tdisplay: flex;\n\t}\n}\n\n// Shows an semi-transparent overlay\n@mixin with-background-dim($opacity: 0.5) {\n\t&.has-background-dim {\n\t\t.background-dim__overlay::before {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tbottom: 0;\n\t\t\tright: 0;\n\t\t\tbackground: inherit;\n\t\t\tborder-radius: inherit;\n\t\t\topacity: $opacity;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t@for $i from 1 through 10 {\n\t\t&.has-background-dim-#{ $i * 10 } .background-dim__overlay::before {\n\t\t\topacity: $i * 0.1;\n\t\t}\n\t}\n}\n\n// Shows a border with the current color and a custom opacity. That can't be achieved\n// with normal border because `currentColor` doesn't allow tweaking the opacity, and\n// setting the opacity of the entire element would change the children's opacity too.\n@mixin with-translucent-border($border-width: 1px, $opacity: 0.3) {\n\tposition: relative;\n\n\t&::after {\n\t\tborder-style: solid;\n\t\tborder-width: $border-width;\n\t\tbottom: 0;\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tleft: 0;\n\t\topacity: $opacity;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t}\n}\n\n// Wraps the content with a media query specially targeting IE11.\n@mixin ie11() {\n\t@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n\t\t@content;\n\t}\n}\n\n// Positions an element absolutely and stretches it over the container\n@mixin absolute-stretch() {\n\tmargin: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Converts a px unit to em.\n@function em($size, $base: 16px) {\n\t@return math.div($size, $base) * 1em;\n}\n\n// Encodes hex colors so they can be used in URL content.\n@function encode-color($color) {\n\t@if type-of($color) != \"color\" or string.index(#{$color}, \"#\") != 1 {\n\t\t@return $color;\n\t}\n\n\t$hex: string.slice(color.ie-hex-str($color), 4);\n\t@return \"%23\" + unquote(\"#{$hex}\");\n}\n","@use \"sass:math\";@use \"sass:string\";@use \"sass:color\";@use \"sass:map\";@import \"_colors\"; @import \"_variables\"; @import \"_breakpoints\"; @import \"_mixins\"; //  Import styles we need to render the checkbox list and checkbox control.\n@import \"../../../../../../packages/components/checkbox-list/style\";\n@import \"../../../../../../packages/components/checkbox-control/style\";\n\n.wp-block-woocommerce-collection-attribute-filter {\n\t.style-dropdown {\n\t\tposition: relative;\n\n\t\t> svg {\n\t\t\tposition: absolute;\n\t\t\tright: 8px;\n\t\t\ttop: 50%;\n\t\t\ttransform: translateY(-50%);\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n}\n",".editor-styles-wrapper .wc-block-components-checkbox-list,\n.wc-block-components-checkbox-list {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none outside;\n\n\tli {\n\t\tmargin: 0 0 $gap-smallest;\n\t\tpadding: 0;\n\t\tlist-style: none outside;\n\t}\n\n\tli.show-more,\n\tli.show-less {\n\t\tbutton {\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tpadding: 0;\n\t\t\ttext-decoration: underline;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t&.is-loading {\n\t\tli {\n\t\t\t@include placeholder();\n\t\t}\n\t}\n}\n",".wc-block-components-checkbox {\n\t@include reset-color();\n\t@include reset-typography();\n\tmargin-top: em($gap);\n\n\tlabel {\n\t\talign-items: flex-start;\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\t@include font-size(small);\n\t\tmargin-bottom: 0 !important;\n\n\t\tinput[type=\"checkbox\"] {\n\t\t\tcursor: inherit;\n\t\t}\n\t}\n\n\t.wc-block-components-checkbox__input[type=\"checkbox\"] {\n\t\tfont-size: 1em;\n\t\tappearance: none;\n\t\tborder: 1px solid $universal-border-medium;\n\t\tborder-radius: $universal-border-radius;\n\t\tbox-sizing: border-box;\n\t\theight: em(24px);\n\t\twidth: em(24px);\n\t\tmargin: 0;\n\t\tmargin-right: em($gap);\n\t\tmin-height: em(24px);\n\t\tmin-width: em(24px);\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\tvertical-align: middle;\n\t\tbackground-color: #fff;\n\n\t\t&:checked {\n\t\t\tbackground: #fff;\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: 1px solid $universal-border-strong;\n\t\t\toutline-offset: 2px;\n\t\t}\n\n\t\t&::before,\n\t\t&::after {\n\t\t\tcontent: \"\";\n\t\t}\n\n\t\t&:not(:checked) + .wc-block-components-checkbox__mark {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.has-dark-controls & {\n\t\t\tborder-color: $controls-border-dark;\n\t\t\tbackground-color: $input-background-dark;\n\n\t\t\t&:checked {\n\t\t\t\tbackground: $input-background-dark;\n\t\t\t\tborder-color: $controls-border-dark;\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\toutline: 2px solid $controls-border-dark;\n\t\t\t\toutline-offset: 2px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.has-error {\n\t\tcolor: $alert-red;\n\n\t\ta {\n\t\t\tcolor: $alert-red;\n\t\t}\n\t\t.wc-block-components-checkbox__input {\n\t\t\t&,\n\t\t\t&:hover,\n\t\t\t&:focus,\n\t\t\t&:active {\n\t\t\t\tborder-color: $alert-red;\n\t\t\t}\n\t\t\t&:focus {\n\t\t\t\toutline: 2px solid $alert-red;\n\t\t\t\toutline-offset: 2px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.wc-block-components-checkbox__mark {\n\t\tfill: #000;\n\t\tposition: absolute;\n\t\tmargin-left: em(3px);\n\t\tmargin-top: em(1px);\n\t\twidth: em(18px);\n\t\theight: em(18px);\n\t\tpointer-events: none;\n\n\t\t.has-dark-controls & {\n\t\t\tfill: #fff;\n\t\t}\n\t}\n\n\t> span,\n\t.wc-block-components-checkbox__label {\n\t\tvertical-align: middle;\n\t\tline-height: em(24px);\n\t}\n}\n\n// Hack to hide the check mark in IE11\n// See comment: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2320/#issuecomment-621936576\n@include ie11() {\n\t.wc-block-components-checkbox__mark {\n\t\tdisplay: none;\n\t}\n}\n\n.theme-twentytwentyone {\n\t.wc-block-components-checkbox__input[type=\"checkbox\"],\n\t.has-dark-controls .wc-block-components-checkbox__input[type=\"checkbox\"] {\n\t\tbackground-color: #fff;\n\t\tborder-color: var(--form--border-color);\n\t\tposition: relative;\n\t}\n\n\t.wc-block-components-checkbox__input[type=\"checkbox\"]:checked,\n\t.has-dark-controls\n\t.wc-block-components-checkbox__input[type=\"checkbox\"]:checked {\n\t\tbackground-color: #fff;\n\t\tborder-color: var(--form--border-color);\n\t}\n\n\t.wc-block-components-checkbox__mark {\n\t\tdisplay: none;\n\t}\n}\n","@import \"node_modules/@wordpress/base-styles/variables\";\n\n// grid-unit from base-styles is 8px.\n$gap-huge:     7 * $grid-unit;\t\t// 56px\n$gap-largest:  6 * $grid-unit;\t\t// 48px\n$gap-larger:   4.5 * $grid-unit;\t// 36px\n$gap-large:    3 * $grid-unit;\t\t// 24px\n$gap:          2 * $grid-unit;\t\t// 16px\n$gap-small:    1.5 * $grid-unit;\t// 12px\n$gap-smaller:  1 * $grid-unit;\t\t// 8px\n$gap-smallest: 0.5 * $grid-unit;\t// 4px\n\n// Standard border radius for forms.\n$universal-border-radius: 4px;\n","@import \"node_modules/@wordpress/base-styles/colors\";\n@import \"node_modules/@automattic/color-studio/dist/color-variables\";\n\n// Bright colors\n$discount-color: $alert-green;\n\n$input-border-gray: #50575e;\n$input-border-dark: rgba(255, 255, 255, 0.4);\n$controls-border-dark: rgba(255, 255, 255, 0.6);\n$input-text-active: #2b2d2f;\n$input-placeholder-dark: rgba(255, 255, 255, 0.6);\n$input-text-dark: #fff;\n$input-background-dark: rgba(0, 0, 0, 0.1);\n$select-dropdown-dark: #1e1e1e;\n$select-dropdown-light: #fff;\n$select-item-dark: rgba(0, 0, 0, 0.4);\n$image-placeholder-border-color: #f2f2f2;\n\n// Universal colors for use on the frontend, currently being applied to checkout blocks.\n$universal-border-light: rgba(17, 17, 17, 0.11); // #e7e7e7 on white. Used for low contrast decorative elements such as section borders.\n$universal-border-medium: rgba(25, 23, 17, 0.48); // Used for radio and checkbox resting state.\n$universal-border-strong: rgba(17, 17, 17, 0.8); // #1e1e1e on white. Used for low contrast decorative elements such as input borders.\n$universal-body-low-emphasis: rgba(17, 17, 17, 0.5); // Used for low emphasis text such as input labels.\n$universal-background: rgba(17, 17, 17, 0.02); // Used for low contrast decorative elements background color.\n","@use \"sass:math\";@use \"sass:string\";@use \"sass:color\";@use \"sass:map\";@import \"_colors\"; @import \"_variables\"; @import \"_breakpoints\"; @import \"_mixins\"; @import \"./vendor\";\n\n.wc-blocks-components-form-token-field-wrapper {\n\tborder-color: $gray-600;\n\n\t.components-visually-hidden,\n\t.components-form-token-field__label {\n\t\t@include visually-hidden();\n\t}\n\n\t.components-form-token-field,\n\t.components-form-token-field__input-container {\n\t\tborder-color: inherit;\n\t\tbox-sizing: border-box;\n\t\tmargin-bottom: 0;\n\t}\n\n\t.components-form-token-field__input-container {\n\t\tbackground-color: #fff;\n\t\tborder-radius: 0;\n\t\tbox-shadow: none;\n\t\tcolor: #000;\n\t\tposition: relative;\n\n\t\tinput[type=\"text\"].components-form-token-field__input {\n\t\t\tmin-height: 30px;\n\t\t}\n\t}\n\n\t.components-form-token-field__remove-token.components-button,\n\t.components-form-token-field__token-text {\n\t\tbackground: $gray-200;\n\t}\n\n\t.components-form-token-field__remove-token {\n\t\tborder: none;\n\t}\n\n\t.components-form-token-field__suggestions-list {\n\t\tbackground-color: $white;\n\t\tborder: 1px solid $gray-600;\n\t\tborder-width: 0 1px 1px;\n\t\tleft: -1px;\n\t\tmargin: 1px 0 0;\n\t\tposition: absolute;\n\t\tright: -1px;\n\t\ttop: 100%;\n\t\tz-index: 50;\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.components-form-token-field__suggestion {\n\t\tpadding: 8px;\n\n\t\t&.is-selected {\n\t\t\tbackground: $gray-100;\n\t\t\tcolor: $gray-800;\n\t\t}\n\t}\n\n\t&.single-selection {\n\t\t.components-form-token-field__token {\n\t\t\tmargin-right: 0;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\tz-index: 1;\n\t\t}\n\n\t\t.components-form-token-field__remove-token.components-button,\n\t\t.components-form-token-field__token-text {\n\t\t\tbackground: transparent;\n\t\t}\n\n\t\t.components-form-token-field__token-text {\n\t\t\tpadding-left: 4px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.components-form-token-field__token + input[type=\"text\"].components-form-token-field__input {\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t.is-active .components-form-token-field__token + input[type=\"text\"].components-form-token-field__input {\n\t\t\tborder: 1px solid $gray-600;\n\t\t\tmargin: 0 2px 4px;\n\t\t\tpadding: 0 5px;\n\t\t\tposition: static;\n\t\t}\n\n\t}\n}\n","// Including style of popover in bin/webpack-entries.js breaks the editor.\n// We need to import and scope the popover style under the\n// wc-blocks-attribute-filter-popover class to prevent conflict.\n// Tooltip must be under the same scope to work properly.\n.wc-blocks-components-form-token-field-wrapper {\n\t/* stylelint-disable no-invalid-position-at-import-rule */\n\t@import \"node_modules/@wordpress/base-styles/breakpoints\";\n\t@import \"node_modules/@wordpress/base-styles/mixins\";\n\t@import \"node_modules/wordpress-components/src/popover/style\";\n\t@import \"node_modules/wordpress-components/src/tooltip/style\";\n\t@import \"node_modules/wordpress-components/src/form-token-field/style\";\n\t/* stylelint-enable no-invalid-position-at-import-rule */\n}\n","/**\n * Breakpoints & Media Queries\n */\n\n// Most used breakpoints\n$break-xhuge: 1920px;\n$break-huge: 1440px;\n$break-wide: 1280px;\n$break-xlarge: 1080px;\n$break-large: 960px;\t// admin sidebar auto folds\n$break-medium: 782px;\t// adminbar goes big\n$break-small: 600px;\n$break-mobile: 480px;\n$break-zoomed-in: 280px;\n\n// All media queries currently in WordPress:\n//\n// min-width: 2000px\n// min-width: 1680px\n// min-width: 1250px\n// max-width: 1120px *\n// max-width: 1000px\n// min-width: 769px and max-width: 1000px\n// max-width: 960px *\n// max-width: 900px\n// max-width: 850px\n// min-width: 800px and max-width: 1499px\n// max-width: 800px\n// max-width: 799px\n// max-width: 782px *\n// max-width: 768px\n// max-width: 640px *\n// max-width: 600px *\n// max-width: 520px\n// max-width: 500px\n// max-width: 480px *\n// max-width: 400px *\n// max-width: 380px\n// max-width: 320px *\n//\n// Those marked * seem to be more commonly used than the others.\n// Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse\n","/**\n * Long content fade mixin\n *\n * Creates a fading overlay to signify that the content is longer\n * than the space allows.\n */\n\n@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {\n\tcontent: \"\";\n\tdisplay: block;\n\tposition: absolute;\n\t-webkit-touch-callout: none;\n\t-webkit-user-select: none;\n\t-khtml-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tpointer-events: none;\n\n\t@if $z-index {\n\t\tz-index: $z-index;\n\t}\n\n\t@if $direction == \"bottom\" {\n\t\tbackground: linear-gradient(to top, transparent, $color 90%);\n\t\tleft: $edge;\n\t\tright: $edge;\n\t\ttop: $edge;\n\t\tbottom: calc(100% - $size);\n\t\twidth: auto;\n\t}\n\n\t@if $direction == \"top\" {\n\t\tbackground: linear-gradient(to bottom, transparent, $color 90%);\n\t\ttop: calc(100% - $size);\n\t\tleft: $edge;\n\t\tright: $edge;\n\t\tbottom: $edge;\n\t\twidth: auto;\n\t}\n\n\t@if $direction == \"left\" {\n\t\tbackground: linear-gradient(to left, transparent, $color 90%);\n\t\ttop: $edge;\n\t\tleft: $edge;\n\t\tbottom: $edge;\n\t\tright: auto;\n\t\twidth: $size;\n\t\theight: auto;\n\t}\n\n\t@if $direction == \"right\" {\n\t\tbackground: linear-gradient(to right, transparent, $color 90%);\n\t\ttop: $edge;\n\t\tbottom: $edge;\n\t\tright: $edge;\n\t\tleft: auto;\n\t\twidth: $size;\n\t\theight: auto;\n\t}\n}\n","@import \"./functions\";\n@import \"./long-content-fade\";\n\n/**\n * Breakpoint mixins\n */\n\n@mixin break-xhuge() {\n\t@media (min-width: #{ ($break-xhuge) }) {\n\t\t@content;\n\t}\n}\n\n@mixin break-huge() {\n\t@media (min-width: #{ ($break-huge) }) {\n\t\t@content;\n\t}\n}\n\n@mixin break-wide() {\n\t@media (min-width: #{ ($break-wide) }) {\n\t\t@content;\n\t}\n}\n\n@mixin break-xlarge() {\n\t@media (min-width: #{ ($break-xlarge) }) {\n\t\t@content;\n\t}\n}\n\n@mixin break-large() {\n\t@media (min-width: #{ ($break-large) }) {\n\t\t@content;\n\t}\n}\n\n@mixin break-medium() {\n\t@media (min-width: #{ ($break-medium) }) {\n\t\t@content;\n\t}\n}\n\n@mixin break-small() {\n\t@media (min-width: #{ ($break-small) }) {\n\t\t@content;\n\t}\n}\n\n@mixin break-mobile() {\n\t@media (min-width: #{ ($break-mobile) }) {\n\t\t@content;\n\t}\n}\n\n@mixin break-zoomed-in() {\n\t@media (min-width: #{ ($break-zoomed-in) }) {\n\t\t@content;\n\t}\n}\n\n/**\n * Focus styles.\n */\n\n@mixin block-toolbar-button-style__focus() {\n\tbox-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px $white;\n\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n}\n\n// Tabs, Inputs, Square buttons.\n@mixin input-style__neutral() {\n\tbox-shadow: 0 0 0 transparent;\n\ttransition: box-shadow 0.1s linear;\n\tborder-radius: $radius-block-ui;\n\tborder: $border-width solid $gray-600;\n\t@include reduce-motion(\"transition\");\n}\n\n\n@mixin input-style__focus() {\n\tborder-color: var(--wp-admin-theme-color);\n\t// Expand the default border focus style by .5px to be a total of 1.5px.\n\tbox-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n}\n\n@mixin button-style__focus() {\n\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);\n\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n}\n\n\n@mixin button-style-outset__focus($focus-color) {\n\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) $focus-color;\n\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n\toutline-offset: 2px;\n}\n\n\n/**\n * Applies editor left position to the selector passed as argument\n */\n\n@mixin editor-left($selector) {\n\t#{$selector} { /* Set left position when auto-fold is not on the body element. */\n\t\tleft: 0;\n\n\t\t@media (min-width: #{ ($break-medium + 1) }) {\n\t\t\tleft: $admin-sidebar-width;\n\t\t}\n\t}\n\n\t.auto-fold #{$selector} { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */\n\t\t@media (min-width: #{ ($break-medium + 1) }) {\n\t\t\tleft: $admin-sidebar-width-collapsed;\n\t\t}\n\n\t\t@media (min-width: #{ ($break-large + 1) }) {\n\t\t\tleft: $admin-sidebar-width;\n\t\t}\n\t}\n\n\t/* Sidebar manually collapsed. */\n\t.folded #{$selector} {\n\t\tleft: 0;\n\n\t\t@media (min-width: #{ ($break-medium + 1) }) {\n\t\t\tleft: $admin-sidebar-width-collapsed;\n\t\t}\n\t}\n\n\tbody.is-fullscreen-mode #{$selector} {\n\t\tleft: 0 !important;\n\t}\n}\n\n/**\n * Styles that are reused verbatim in a few places\n */\n\n// These are additional styles for all captions, when the theme opts in to block styles.\n@mixin caption-style() {\n\tmargin-top: 0.5em;\n\tmargin-bottom: 1em;\n}\n\n@mixin caption-style-theme() {\n\tcolor: #555;\n\tfont-size: $default-font-size;\n\ttext-align: center;\n\n\t.is-dark-theme & {\n\t\tcolor: $light-gray-placeholder;\n\t}\n}\n\n@mixin placeholder-style() {\n\tborder-radius: $radius-block-ui;\n\n\t&::before {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tpointer-events: none;\n\t\tbackground: currentColor;\n\t\topacity: 0.1;\n\t}\n}\n\n/**\n * Allows users to opt-out of animations via OS-level preferences.\n */\n\n@mixin reduce-motion($property: \"\") {\n\n\t@if $property == \"transition\" {\n\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t} @else if $property == \"animation\" {\n\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\tanimation-duration: 1ms;\n\t\t\tanimation-delay: 0s;\n\t\t}\n\t} @else {\n\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t\tanimation-duration: 1ms;\n\t\t\tanimation-delay: 0s;\n\t\t}\n\t}\n}\n\n@mixin input-control {\n\tfont-family: $default-font;\n\tpadding: 6px 8px;\n\t@include input-style__neutral();\n\n\t/* Fonts smaller than 16px causes mobile safari to zoom. */\n\tfont-size: $mobile-text-min-font-size;\n\t/* Override core line-height. To be reviewed. */\n\tline-height: normal;\n\t@include break-small {\n\t\tfont-size: $default-font-size;\n\t\t/* Override core line-height. To be reviewed. */\n\t\tline-height: normal;\n\t}\n\n\t&:focus {\n\t\t@include input-style__focus();\n\t}\n\n\t// Use opacity to work in various editor styles.\n\t&::-webkit-input-placeholder {\n\t\tcolor: $dark-gray-placeholder;\n\t}\n\n\t&::-moz-placeholder {\n\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\tcolor: $dark-gray-placeholder;\n\t}\n\n\t&:-ms-input-placeholder {\n\t\tcolor: $dark-gray-placeholder;\n\t}\n}\n\n@mixin checkbox-control {\n\t@include input-control;\n\tborder: $border-width solid $gray-900;\n\tmargin-right: $grid-unit-15;\n\ttransition: none;\n\tborder-radius: $radius-block-ui;\n\n\t&:focus {\n\t\tbox-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);\n\n\t\t// Only visible in Windows High Contrast mode.\n\t\toutline: 2px solid transparent;\n\t}\n\n\t&:checked {\n\t\tbackground: var(--wp-admin-theme-color);\n\t\tborder-color: var(--wp-admin-theme-color);\n\n\t\t// Hide default checkbox styles in IE.\n\t\t&::-ms-check {\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t&:checked::before,\n\t&[aria-checked=\"mixed\"]::before {\n\t\tmargin: -3px -5px;\n\t\tcolor: $white;\n\n\t\t@include break-medium() {\n\t\t\tmargin: -4px 0 0 -5px;\n\t\t}\n\t}\n\n\t&[aria-checked=\"mixed\"] {\n\t\tbackground: var(--wp-admin-theme-color);\n\t\tborder-color: var(--wp-admin-theme-color);\n\n\t\t&::before {\n\t\t\t// Inherited from `forms.css`.\n\t\t\t// See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132\n\t\t\tcontent: \"\\f460\";\n\t\t\tfloat: left;\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t\twidth: 16px;\n\t\t\t/* stylelint-disable */\n\t\t\tfont: normal 30px/1 dashicons;\n\t\t\t/* stylelint-enable */\n\t\t\tspeak: none;\n\t\t\t-webkit-font-smoothing: antialiased;\n\t\t\t-moz-osx-font-smoothing: grayscale;\n\n\t\t\t@include break-medium() {\n\t\t\t\tfloat: none;\n\t\t\t\tfont-size: 21px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n@mixin radio-control {\n\t@include input-control;\n\tborder: $border-width solid $gray-900;\n\tmargin-right: $grid-unit-15;\n\ttransition: none;\n\tborder-radius: $radius-round;\n\twidth: $radio-input-size-sm;\n\theight: $radio-input-size-sm;\n\n\t@include break-small() {\n\t\theight: $radio-input-size;\n\t\twidth: $radio-input-size;\n\t}\n\n\t&:checked::before {\n\t\tbox-sizing: inherit;\n\t\twidth: 8px;\n\t\theight: 8px;\n\t\ttransform: translate(7px, 7px);\n\t\tmargin: 0;\n\t\tbackground-color: $white;\n\n\t\t// This border serves as a background color in Windows High Contrast mode.\n\t\tborder: 4px solid $white;\n\n\t\t@include break-small() {\n\t\t\ttransform: translate(5px, 5px);\n\t\t}\n\t}\n\n\t&:focus {\n\t\tbox-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);\n\n\t\t// Only visible in Windows High Contrast mode.\n\t\toutline: 2px solid transparent;\n\t}\n\n\t&:checked {\n\t\tbackground: var(--wp-admin-theme-color);\n\t\tborder-color: var(--wp-admin-theme-color);\n\t}\n}\n\n/**\n * Reset default styles for JavaScript UI based pages.\n * This is a WP-admin agnostic reset\n */\n\n@mixin reset {\n\tbox-sizing: border-box;\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: inherit;\n\t}\n}\n\n// The editor input reset with increased specificity to avoid theme styles bleeding in.\n@mixin editor-input-reset() {\n\tfont-family: $editor-html-font !important;\n\tcolor: $gray-900 !important;\n\tbackground: $white !important;\n\tpadding: $grid-unit-15 !important;\n\tborder: $border-width solid $gray-900 !important;\n\tbox-shadow: none !important;\n\tborder-radius: $radius-block-ui !important;\n\n\t// Fonts smaller than 16px causes mobile safari to zoom.\n\tfont-size: $mobile-text-min-font-size !important;\n\t@include break-small {\n\t\tfont-size: $default-font-size !important;\n\t}\n\n\t&:focus {\n\t\tborder-color: var(--wp-admin-theme-color) !important;\n\t\tbox-shadow: 0 0 0 ($border-width-focus-fallback - $border-width) var(--wp-admin-theme-color) !important;\n\n\t\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\t\toutline: 2px solid transparent !important;\n\t}\n}\n\n/**\n * Reset the WP Admin page styles for Gutenberg-like pages.\n */\n\n@mixin wp-admin-reset( $content-container ) {\n\tbackground: $white;\n\n\t#wpcontent {\n\t\tpadding-left: 0;\n\t}\n\n\t#wpbody-content {\n\t\tpadding-bottom: 0;\n\t}\n\n\t/* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.\n\t   Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */\n\t#wpbody-content > div:not(#{ $content-container }):not(#screen-meta) {\n\t\tdisplay: none;\n\t}\n\n\t#wpfooter {\n\t\tdisplay: none;\n\t}\n\n\t.a11y-speak-region {\n\t\tleft: -1px;\n\t\ttop: -1px;\n\t}\n\n\tul#adminmenu a.wp-has-current-submenu::after,\n\tul#adminmenu > li.current > a.current::after {\n\t\tborder-right-color: $white;\n\t}\n\n\t.media-frame select.attachment-filters:last-of-type {\n\t\twidth: auto;\n\t\tmax-width: 100%;\n\t}\n}\n\n@mixin admin-scheme($color-primary) {\n\t// Define RGB equivalents for use in rgba function.\n\t// Hexadecimal css vars do not work in the rgba function.\n\t--wp-admin-theme-color: #{$color-primary};\n\t--wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)};\n\t// Darker shades.\n\t--wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};\n\t--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(darken($color-primary, 5%))};\n\t--wp-admin-theme-color-darker-20: #{darken($color-primary, 10%)};\n\t--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(darken($color-primary, 10%))};\n\n\t// Focus style width.\n\t// Avoid rounding issues by showing a whole 2px for 1x screens, and 1.5px on high resolution screens.\n\t--wp-admin-border-width-focus: 2px;\n\t@media ( -webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n\t\t--wp-admin-border-width-focus: 1.5px;\n\t}\n}\n\n@mixin wordpress-admin-schemes() {\n\tbody.admin-color-light {\n\t\t@include admin-scheme(#0085ba);\n\t}\n\n\tbody.admin-color-modern {\n\t\t@include admin-scheme(#3858e9);\n\t}\n\n\tbody.admin-color-blue {\n\t\t@include admin-scheme(#096484);\n\t}\n\n\tbody.admin-color-coffee {\n\t\t@include admin-scheme(#46403c);\n\t}\n\n\tbody.admin-color-ectoplasm {\n\t\t@include admin-scheme(#523f6d);\n\t}\n\n\tbody.admin-color-midnight {\n\t\t@include admin-scheme(#e14d43);\n\t}\n\n\tbody.admin-color-ocean {\n\t\t@include admin-scheme(#627c83);\n\t}\n\n\tbody.admin-color-sunrise {\n\t\t@include admin-scheme(#dd823b);\n\t}\n}\n\n// Deprecated from UI, kept for back-compat.\n@mixin background-colors-deprecated() {\n\t.has-very-light-gray-background-color {\n\t\tbackground-color: #eee;\n\t}\n\n\t.has-very-dark-gray-background-color {\n\t\tbackground-color: #313131;\n\t}\n}\n\n// Deprecated from UI, kept for back-compat.\n@mixin foreground-colors-deprecated() {\n\t.has-very-light-gray-color {\n\t\tcolor: #eee;\n\t}\n\n\t.has-very-dark-gray-color {\n\t\tcolor: #313131;\n\t}\n}\n\n// Deprecated from UI, kept for back-compat.\n@mixin gradient-colors-deprecated() {\n\t/*\n\t * Our classes uses the same values we set for gradient value attributes,\n\t * and we can not use spacing because of WP multi site kses rule.\n\t */\n\n\t/* stylelint-disable function-comma-space-after */\n\t.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {\n\t\tbackground: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);\n\t}\n\n\t.has-purple-crush-gradient-background {\n\t\tbackground: linear-gradient(135deg,rgb(52,226,228) 0%,rgb(71,33,251) 50%,rgb(171,29,254) 100%);\n\t}\n\n\t.has-hazy-dawn-gradient-background {\n\t\tbackground: linear-gradient(135deg,rgb(250,172,168) 0%,rgb(218,208,236) 100%);\n\t}\n\n\t.has-subdued-olive-gradient-background {\n\t\tbackground: linear-gradient(135deg,rgb(250,250,225) 0%,rgb(103,166,113) 100%);\n\t}\n\n\t.has-atomic-cream-gradient-background {\n\t\tbackground: linear-gradient(135deg,rgb(253,215,154) 0%,rgb(0,74,89) 100%);\n\t}\n\n\t.has-nightshade-gradient-background {\n\t\tbackground: linear-gradient(135deg,rgb(51,9,104) 0%,rgb(49,205,207) 100%);\n\t}\n\n\t.has-midnight-gradient-background {\n\t\tbackground: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);\n\t}\n\t/* stylelint-enable function-comma-space-after */\n}\n\n@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) {\n\n\t// WebKit\n\t&::-webkit-scrollbar {\n\t\twidth: 12px;\n\t\theight: 12px;\n\t}\n\t&::-webkit-scrollbar-track {\n\t\tbackground-color: transparent;\n\t}\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: $handle-color;\n\t\tborder-radius: 8px;\n\t\tborder: 3px solid transparent;\n\t\tbackground-clip: padding-box;\n\t}\n\t&:hover::-webkit-scrollbar-thumb, // This needs specificity.\n\t&:focus::-webkit-scrollbar-thumb,\n\t&:focus-within::-webkit-scrollbar-thumb {\n\t\tbackground-color: $handle-color-hover;\n\t}\n\n\t// Firefox 109+ and Chrome 111+\n\tscrollbar-width: thin;\n\tscrollbar-gutter: stable both-edges;\n\tscrollbar-color: $handle-color transparent; // Syntax, \"dark\", \"light\", or \"#handle-color #track-color\"\n\n\t&:hover,\n\t&:focus,\n\t&:focus-within {\n\t\tscrollbar-color: $handle-color-hover transparent;\n\t}\n\n\t// Needed to fix a Safari rendering issue.\n\twill-change: transform;\n\n\t// Always show scrollbar on Mobile devices.\n\t@media (hover: none) {\n\t\t& {\n\t\t\tscrollbar-color: $handle-color-hover transparent;\n\t\t}\n\t}\n}\n","$arrow-size: 8px;\n\n/*!rtl:begin:ignore*/\n.components-popover {\n\tposition: fixed;\n\tz-index: z-index(\".components-popover\");\n\ttop: 0;\n\tleft: 0;\n\n\t// Hide the popover element until the position has been calculated. The position\n\t// cannot be calculated until the popover element is rendered because the\n\t// position depends on the size of the popover.\n\topacity: 0;\n\n\t&.is-expanded,\n\t&[data-x-axis][data-y-axis] {\n\t\topacity: 1;\n\t}\n\n\t&.is-expanded {\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tz-index: z-index(\".components-popover\") !important;\n\t}\n\n\t&:not(.is-without-arrow) {\n\t\tmargin-left: 2px;\n\n\t\t&::before {\n\t\t\tborder: $arrow-size solid $gray-400;\n\t\t}\n\n\t\t&.is-alternate::before {\n\t\t\tborder-color: $gray-900;\n\t\t}\n\n\t\t&::after {\n\t\t\tborder: $arrow-size solid $white;\n\t\t}\n\n\t\t&::before,\n\t\t&::after {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\theight: 0;\n\t\t\twidth: 0;\n\t\t\tline-height: 0;\n\t\t}\n\n\t\t&[data-y-axis=\"top\"] {\n\t\t\tmargin-top: - $arrow-size;\n\n\t\t\t&::before {\n\t\t\t\tbottom: - $arrow-size;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tbottom: -6px;\n\t\t\t}\n\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tborder-bottom: none;\n\t\t\t\tborder-left-color: transparent;\n\t\t\t\tborder-right-color: transparent;\n\t\t\t\tborder-top-style: solid;\n\t\t\t\tmargin-left: -10px;\n\t\t\t}\n\t\t}\n\n\t\t&[data-y-axis=\"bottom\"] {\n\t\t\tmargin-top: $arrow-size;\n\n\t\t\t&::before {\n\t\t\t\ttop: -$arrow-size;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\ttop: -6px;\n\t\t\t}\n\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t\tborder-left-color: transparent;\n\t\t\t\tborder-right-color: transparent;\n\t\t\t\tborder-top: none;\n\t\t\t\tmargin-left: -10px;\n\t\t\t}\n\t\t}\n\n\t\t&[data-y-axis=\"middle\"][data-x-axis=\"left\"] {\n\t\t\tmargin-left: -$arrow-size;\n\n\t\t\t&::before {\n\t\t\t\tright: -$arrow-size;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tright: -6px;\n\t\t\t}\n\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\tborder-left-style: solid;\n\t\t\t\tborder-right: none;\n\t\t\t\tborder-top-color: transparent;\n\t\t\t}\n\t\t}\n\n\t\t&[data-y-axis=\"middle\"][data-x-axis=\"right\"] {\n\t\t\tmargin-left: $arrow-size;\n\n\t\t\t&::before {\n\t\t\t\tleft: -$arrow-size;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tleft: -6px;\n\t\t\t}\n\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\tborder-left: none;\n\t\t\t\tborder-right-style: solid;\n\t\t\t\tborder-top-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n\n\t&[data-y-axis=\"top\"] {\n\t\tbottom: 100%;\n\t}\n\n\t&[data-y-axis=\"bottom\"] {\n\t\ttop: 100%;\n\t}\n\n\t&[data-y-axis=\"middle\"] {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t// Add spacing.\n\t&.is-from-top {\n\t\tmargin-top: $grid-unit-15;\n\t}\n\n\t&.is-from-bottom {\n\t\tmargin-top: -$grid-unit-15;\n\t}\n\n\t&.is-from-left:not(.is-from-top):not(.is-from-bottom) {\n\t\tmargin-left: $grid-unit-15;\n\t}\n\n\t&.is-from-right:not(.is-from-top):not(.is-from-bottom) {\n\t\tmargin-right: $grid-unit-15;\n\t}\n}\n\n.components-popover__content {\n\theight: 100%;\n\tbackground: $white;\n\tborder: $border-width solid $gray-400;\n\tbox-shadow: $shadow-popover;\n\tborder-radius: $radius-block-ui;\n\n\t// Alternate treatment for popovers that put them at elevation zero with high contrast.\n\t.is-alternate & {\n\t\tborder: $border-width solid $gray-900;\n\t\tbox-shadow: none;\n\t}\n\n\t.components-popover & {\n\t\tposition: absolute;\n\t\theight: auto;\n\t\toverflow-y: auto;\n\t}\n\n\t.components-popover.is-expanded & {\n\t\tposition: static;\n\t\theight: calc(100% - #{ $panel-header-height });\n\t\toverflow-y: visible;\n\t\tmin-width: auto;\n\t\tborder: none;\n\t\tborder-top: $border-width solid $gray-900;\n\t}\n\n\t.components-popover[data-y-axis=\"top\"] & {\n\t\tbottom: 100%;\n\t}\n\n\t.components-popover[data-x-axis=\"center\"] & {\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t}\n\n\t.components-popover[data-x-axis=\"right\"] & {\n\t\tposition: absolute;\n\t\tleft: 100%;\n\t}\n\n\t.components-popover:not([data-y-axis=\"middle\"])[data-x-axis=\"right\"] & {\n\t\tmargin-left: -($grid-unit-30 + $border-width);\n\t}\n\n\t.components-popover[data-x-axis=\"left\"] & {\n\t\tposition: absolute;\n\t\tright: 100%;\n\t}\n\n\t.components-popover:not([data-y-axis=\"middle\"])[data-x-axis=\"left\"] & {\n\t\tmargin-right: -($grid-unit-30 + $border-width);\n\t}\n}\n\n.components-popover__header {\n\talign-items: center;\n\tbackground: $white;\n\tdisplay: flex;\n\theight: $panel-header-height;\n\tjustify-content: space-between;\n\tpadding: 0 8px 0 $grid-unit-20;\n}\n\n.components-popover__header-title {\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\twidth: 100%;\n}\n\n.components-popover__close.components-button {\n\tz-index: z-index(\".components-popover__close\");\n}\n/*!rtl:end:ignore*/\n",".components-tooltip.components-popover {\n\tz-index: z-index(\".components-tooltip\");\n\n\t.components-popover__content {\n\t\tmin-width: 0;\n\t}\n}\n\n.components-tooltip .components-popover__content {\n\tbackground: $gray-900;\n\tborder-radius: $radius-block-ui;\n\tborder-width: 0;\n\tcolor: $white;\n\twhite-space: nowrap;\n\ttext-align: center;\n\tline-height: 1.4;\n\tfont-size: 12px;\n\tbox-shadow: none;\n\n\t> div {\n\t\tpadding: $grid-unit-05 $grid-unit-10;\n\t}\n}\n\n.components-tooltip__shortcut {\n\tdisplay: inline-block;\n\tmargin-left: $grid-unit-10;\n}\n\n.disabled-element-wrapper {\n\tposition: relative;\n\t.event-catcher {\n\t\tz-index: z-index(\".components-tooltip .event-catcher\");\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\tright: 0;\n\t}\n}\n",".components-form-token-field__input-container {\n\t@include input-control();\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\twidth: 100%;\n\tmargin: 0 0 $grid-unit-10 0;\n\tpadding: $grid-unit-05/2 $grid-unit-05;\n\tcursor: text;\n\n\n\t&.is-disabled {\n\t\tbackground: $gray-300;\n\t\tborder-color: $gray-300;\n\t}\n\n\t&.is-active {\n\t\t@include input-style__focus();\n\t}\n\n\t// Token input\n\tinput[type=\"text\"].components-form-token-field__input {\n\t\tdisplay: inline-block;\n\t\tflex: 1;\n\t\tfont-size: 16px;\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tmargin-left: 4px;\n\t\tpadding: 0;\n\t\tmin-height: 24px;\n\t\tmin-width: 50px;\n\t\tbackground: inherit;\n\t\tborder: 0;\n\t\tcolor: $gray-900;\n\t\tbox-shadow: none;\n\n\t\t// Resolves Zooming on iOS devices\n\t\t// https://github.com/WordPress/gutenberg/issues/27405\n\t\t@include break-small() {\n\t\t\tfont-size: 13px;\n\t\t}\n\n\t\t&:focus,\n\t\t.components-form-token-field.is-active & {\n\t\t\toutline: none;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\t.components-form-token-field__token + input[type=\"text\"].components-form-token-field__input {\n\t\twidth: auto;\n\t}\n}\n\n.components-form-token-field__label {\n\tdisplay: inline-block;\n\tmargin-bottom: $grid-unit-05;\n}\n\n.components-form-token-field__help {\n\tfont-size: $helptext-font-size;\n\tfont-style: normal;\n\tcolor: $gray-700;\n}\n\n// Tokens\n.components-form-token-field__token {\n\tfont-size: $default-font-size;\n\tdisplay: flex;\n\tmargin: 2px 4px 2px 0;\n\tcolor: $gray-900;\n\tmax-width: 100%;\n\n\t&.is-success {\n\t\t.components-form-token-field__token-text,\n\t\t.components-form-token-field__remove-token {\n\t\t\tbackground: $alert-green;\n\t\t}\n\t}\n\n\t&.is-error {\n\t\t.components-form-token-field__token-text,\n\t\t.components-form-token-field__remove-token {\n\t\t\tbackground: $alert-red;\n\t\t}\n\t}\n\n\t&.is-validating {\n\t\t.components-form-token-field__token-text,\n\t\t.components-form-token-field__remove-token {\n\t\t\tcolor: $gray-700;\n\t\t}\n\t}\n\n\t&.is-borderless {\n\t\tposition: relative;\n\t\tpadding: 0 16px 0 0;\n\n\t\t.components-form-token-field__token-text {\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--wp-admin-theme-color);\n\t\t}\n\n\t\t.components-form-token-field__remove-token {\n\t\t\tbackground: transparent;\n\t\t\tcolor: $gray-700;\n\t\t\tposition: absolute;\n\t\t\ttop: 1px;\n\t\t\tright: 0;\n\t\t}\n\n\t\t&.is-success {\n\t\t\t.components-form-token-field__token-text {\n\t\t\t\tcolor: $alert-green;\n\t\t\t}\n\t\t}\n\n\t\t&.is-error {\n\t\t\t.components-form-token-field__token-text {\n\t\t\t\tcolor: $alert-red;\n\t\t\t\tborder-radius: 4px 0 0 4px;\n\t\t\t\tpadding: 0 4px 0 6px;\n\t\t\t}\n\t\t}\n\n\t\t&.is-validating {\n\t\t\t.components-form-token-field__token-text {\n\t\t\t\tcolor: $gray-900;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.is-disabled {\n\t\t.components-form-token-field__remove-token {\n\t\t\tcursor: default;\n\t\t}\n\t}\n}\n\n.components-form-token-field__token-text,\n.components-form-token-field__remove-token.components-button {\n\tdisplay: inline-block;\n\tline-height: 24px;\n\theight: auto;\n\tbackground: $gray-300;\n\tmin-width: unset;\n\ttransition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);\n\t@include reduce-motion;\n}\n\n.components-form-token-field__token-text {\n\tborder-radius: 2px 0 0 2px;\n\tpadding: 0 0 0 8px;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.components-form-token-field__remove-token.components-button {\n\tcursor: pointer;\n\tborder-radius: 0 2px 2px 0;\n\tpadding: 0 2px;\n\tcolor: $gray-900;\n\tline-height: 10px;\n\toverflow: initial;\n\n\t&:hover {\n\t\tcolor: $gray-900;\n\t}\n}\n\n// Suggestion list\n.components-form-token-field__suggestions-list {\n\tflex: 1 0 100%;\n\tmin-width: 100%;\n\tmax-height: 9em;\n\toverflow-y: auto;\n\ttransition: all 0.15s ease-in-out;\n\t@include reduce-motion(\"transition\");\n\tlist-style: none;\n\tborder-top: $border-width solid $gray-700;\n\tmargin: $grid-unit-05 (-$grid-unit-05) (-$grid-unit-05);\n\tpadding: 0;\n}\n\n.components-form-token-field__suggestion {\n\tcolor: $gray-700;\n\tdisplay: block;\n\tfont-size: $default-font-size;\n\tpadding: 4px 8px;\n\tmargin: 0;\n\tcursor: pointer;\n\n\t&.is-selected {\n\t\tbackground: var(--wp-admin-theme-color);\n\t\tcolor: $white;\n\t}\n}\n\n.components-form-token-field__suggestion-match {\n\ttext-decoration: underline;\n}\n","@use \"sass:math\";@use \"sass:string\";@use \"sass:color\";@use \"sass:map\";@import \"_colors\"; @import \"_variables\"; @import \"_breakpoints\"; @import \"_mixins\"; .wc-filter-element-label-list-count {\n\t&::before {\n\t\tcontent: \" (\";\n\t}\n\t&::after {\n\t\tcontent: \")\";\n\t}\n}\n"],"names":[],"sourceRoot":""}