woocommerce/chunks/169.style.css.map

{"version":3,"file":"chunks/169.style.css?ver=108ee1c8a1d11da323bb","mappings":"AAIA;AAAA;AAAA","sources":["webpack://@woocommerce/storybook/../../node_modules/.pnpm/@wordpress+base-styles@4.3.1/node_modules/@wordpress/base-styles/_default-custom-properties.scss","webpack://@woocommerce/storybook/../../node_modules/.pnpm/@wordpress+base-styles@4.3.1/node_modules/@wordpress/base-styles/_mixins.scss","webpack://@woocommerce/storybook/../../plugins/woocommerce/client/admin/client/core-profiler/components/heading/style.scss","webpack://@woocommerce/storybook/../../node_modules/.pnpm/@wordpress+base-styles@4.3.1/node_modules/@wordpress/base-styles/_colors.scss","webpack://@woocommerce/storybook/../../packages/js/internal-style-build/abstracts/_breakpoints.scss","webpack://@woocommerce/storybook/../../plugins/woocommerce/client/admin/client/core-profiler/components/navigation/navigation.scss","webpack://@woocommerce/storybook/../../plugins/woocommerce/client/admin/client/core-profiler/components/progress-bar/progress-bar.scss"],"sourcesContent":["\n// It is important to include these styles in all built stylesheets.\n// This allows to CSS variables post CSS plugin to generate fallbacks.\n// It also provides default CSS variables for npm package consumers.\n:root {\n\t@include admin-scheme(#007cba);\n}\n","@import \"./functions\";\n\n/**\n * Breakpoint mixins\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/**\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, rgba($color, 0), $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, rgba($color, 0), $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, rgba($color, 0), $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, rgba($color, 0), $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\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-700;\n\t@include reduce-motion(\"transition\");\n}\n\n\n@mixin input-style__focus() {\n\tborder-color: var(--wp-admin-theme-color);\n\tbox-shadow: 0 0 0 ($border-width-focus - $border-width) 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/**\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\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\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) 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) 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@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/**\n * Reset the WP Admin page styles for Gutenberg-like pages.\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","@use \"sass:math\";@import \"_colors\"; @import \"_variables\"; @import \"_breakpoints\"; @import \"_mixins\"; .woocommerce-profiler-heading {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tmargin-bottom: 48px;\n\tmax-width: 610px;\n\twidth: 100%;\n\n\t.woocommerce-profiler-heading__title {\n\t\tfont-style: normal;\n\t\tfont-size: 32px;\n\t\tline-height: 40px;\n\t\ttext-align: center;\n\t\tcolor: $gray-900;\n\t\tmargin-bottom: 12px;\n\t\tletter-spacing: normal;\n\t\tpadding-top: 0;\n\t\tfont-weight: 500;\n\n\t\t@include breakpoint( \"<782px\" ) {\n\t\t\tfont-size: 28px;\n\t\t\tline-height: 36px;\n\t\t}\n\t}\n\n\t.woocommerce-profiler-heading__subtitle {\n\t\tfont-style: normal;\n\t\tfont-weight: 400;\n\t\tfont-size: 16px;\n\t\tline-height: 24px;\n\t\ttext-align: center;\n\t\tcolor: $gray-700;\n\n\t\t@include breakpoint( \"<782px\" ) {\n\t\t\tcolor: $gray-700;\n\t\t}\n\t}\n\n\t&.woocommerce-profiler__stepper-heading {\n\t\tmargin-top: 72px;\n\n\t\t.woocommerce-profiler-heading__title {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t\t.woocommerce-profiler-heading__subtitle {\n\t\t\tmargin: 12px 0 0;\n\t\t}\n\n\t\t@media (max-width: #{ ($break-mobile) }) {\n\t\t\tmargin: 52px 0 40px;\n\n\t\t\t.woocommerce-profiler-heading__title {\n\t\t\t\ttext-align: left;\n\t\t\t}\n\t\t\t.woocommerce-profiler-heading__subtitle {\n\t\t\t\ttext-align: left;\n\t\t\t\tfont-size: 16px;\n\t\t\t\tcolor: $gray-700;\n\t\t\t}\n\t\t}\n\t}\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\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$breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px;\n\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","@use \"sass:math\";@import \"_colors\"; @import \"_variables\"; @import \"_breakpoints\"; @import \"_mixins\"; .woocommerce-profiler-navigation {\n\tdisplay: flex;\n\tflex-flow: row;\n\tfont-size: 0.875rem;\n\tmargin-top: 21px;\n\n\t.woocommerce-profiler-navigation-col-left,\n\t.woocommerce-profiler-navigation-col-center,\n\t.woocommerce-profiler-navigation-col-right {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t}\n\n\t.woocommerce-profiler-navigation-col-left {\n\t\tjustify-content: left;\n\t\t.woologo svg {\n\t\t\tmargin-left: 38px;\n\t\t\tmargin-right: 24px;\n\t\t\twidth: 38px;\n\t\t\theight: 23px;\n\t\t}\n\t}\n\n\t.woocommerce-profiler-navigation-col-center {\n\t\tjustify-content: center;\n\t}\n\n\t.woocommerce-profiler-navigation-col-right {\n\t\tjustify-content: end;\n\t\tbutton.is-primary {\n\t\t\tborder-radius: 4px;\n\t\t\theight: 40px;\n\t\t\tmargin-right: 24px;\n\t\t}\n\n\t\tbutton.is-link {\n\t\t\tcolor: var(--wp-admin-theme-color);\n\t\t\tmargin-right: 24px;\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n}\n\n@include breakpoint( \"<782px\" ) {\n\t.woocommerce-profiler-navigation {\n\t\t.woocommerce-profiler-navigation-col-left {\n\t\t\t.woologo svg {\n\t\t\t\tmargin-left: 24px;\n\t\t\t}\n\t\t}\n\t}\n}\n","@use \"sass:math\";@import \"_colors\"; @import \"_variables\"; @import \"_breakpoints\"; @import \"_mixins\"; .woocommerce-profiler-progress-bar__container {\n\theight: 8px;\n\twidth: 100%;\n}\n\n// Min width equal to height. This means small values look like each other, but all bars have a consistent radius.\n.woocommerce-profiler-progress-bar__filler {\n\theight: 100%;\n\tmin-width: 8px;\n}\n"],"names":[],"sourceRoot":""}