product-button.css.map — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / product-button.css.map
woocommerce / assets / client / blocks Last commit date
product-button.css.map
1 lines
{"version":3,"file":"product-button.css","mappings":";;;AAAA;;;;;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;AAlE0J;EACzJ;EACA;EACA;EACA;EACA;EACA;EACA,SCCc;ADmEf;AAlEC;EACC;EACA;EACA;EACA;EACA;EAEA;AAmEF;AAjEE;EACC;AAmEH;AAhEE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAkEH;AA9DC;EACC;AAgEF;AA7DC;EACC;IACC;EA+DD;EA7DA;IACC;EA+DD;AACF;AA5DC;EACC;IACC;IACA;EA8DD;EA5DA;IACC;IACA;EA8DD;AACF;AA3DC;EACC;AA6DF;AA1DC;EACC;AA4DF;AAzDC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA2DF;AAvDG;EACC;AAyDJ;AAvDG;EACC;AAyDJ;AApDC;EDvDA;EACA;EACA;EACA;EACA;EAEC;EAED;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECyCC;EACA;AAoEF;AD3GC;EACC;AC6GF;AD1GC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AC4GF;ADzGC;ECkBA;IDjBC;EC4GA;AACF;AAtFC;EACC,mBCtFa;AD8Kf;;AApFA;EDlEC;EACA;EACA;EACA;EACA;EAEC;EAED;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECoDA;EACA;AAqGD;ADvJC;EACC;ACyJF;ADtJC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ACwJF;ADrJC;EC6BD;ID5BE;ECwJA;AACF;;AArHC;EACC;EACA;EACA;AAwHF;;AAlHC;EACC;AAqHF;AAnHE;EACC;AAqHH;AAlHE;EACC;EACA;AAoHH;;AA5GE;EACC;AA+GH;AAzGG;EACC;AA2GJ;AA5GG;EACC;AA8GJ;AA/GG;EACC;AAiHJ;AAlHG;EACC;AAoHJ,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/atomic/blocks/product-elements/button/style.scss","webpack://wc/./assets/css/abstracts/_variables.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\"; .wp-block-button.wc-block-components-product-button {\n\tword-break: break-word;\n\twhite-space: normal;\n\tdisplay: flex;\n\tjustify-content: center;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: $gap-small;\n\n\t.wp-block-button__link {\n\t\tword-break: break-word;\n\t\twhite-space: normal;\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t\t// Set button font size so it inherits from parent.\n\t\tfont-size: 1em;\n\n\t\t&.loading {\n\t\t\topacity: 0.25;\n\t\t}\n\n\t\t&.loading::after {\n\t\t\tfont-family: WooCommerce; /* stylelint-disable-line */\n\t\t\tcontent: \"\\e031\";\n\t\t\tanimation: spin 2s linear infinite;\n\t\t\tmargin-right: 0;\n\t\t\tmargin-left: 0.5em;\n\t\t\tdisplay: inline-block;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t}\n\t}\n\n\ta[hidden] {\n\t\tdisplay: none;\n\t}\n\n\t@keyframes slideOut {\n\t\tfrom {\n\t\t\ttransform: translateY(0);\n\t\t}\n\t\tto {\n\t\t\ttransform: translateY(-100%);\n\t\t}\n\t}\n\n\t@keyframes slideIn {\n\t\tfrom {\n\t\t\ttransform: translateY(90%);\n\t\t\topacity: 0;\n\t\t}\n\t\tto {\n\t\t\ttransform: translate(0);\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t&.align-left {\n\t\talign-items: flex-start;\n\t}\n\n\t&.align-right {\n\t\talign-items: flex-end;\n\t}\n\n\t.wc-block-components-product-button__button {\n\t\tborder-style: none;\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\t\twhite-space: normal;\n\t\tword-break: break-word;\n\t\toverflow: hidden;\n\t\talign-items: center;\n\t\tline-height: inherit;\n\n\t\tspan {\n\n\t\t\t&.wc-block-slide-out {\n\t\t\t\tanimation: slideOut 0.1s linear 1 normal forwards;\n\t\t\t}\n\t\t\t&.wc-block-slide-in {\n\t\t\t\tanimation: slideIn 0.1s linear 1 normal;\n\t\t\t}\n\t\t}\n\t}\n\n\t.wc-block-components-product-button__button--placeholder {\n\t\t@include placeholder();\n\t\tmin-width: 8em;\n\t\tmin-height: 3em;\n\t}\n\n\t.wc-block-all-products & {\n\t\tmargin-bottom: $gap-small;\n\t}\n}\n\n.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {\n\t@include placeholder();\n\tmin-width: 8em;\n\tmin-height: 3em;\n}\n\n.theme-twentytwentyone {\n\t// Prevent buttons appearing disabled in the editor.\n\t.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link {\n\t\tbackground-color: var(--button--color-background);\n\t\tcolor: var(--button--color-text);\n\t\tborder-color: var(--button--color-background);\n\t}\n}\n\n// Style: Fill & Outline\n.wp-block-button.is-style-outline {\n\t.wp-block-button__link {\n\t\tborder: 2px solid currentColor;\n\n\t\t&:not(.has-text-color) {\n\t\t\tcolor: currentColor;\n\t\t}\n\n\t\t&:not(.has-background) {\n\t\t\tbackground-color: transparent;\n\t\t\tbackground-image: none;\n\t\t}\n\t}\n}\n\n// Width setting\n.wp-block-button {\n\t&.has-custom-width {\n\t\t.wp-block-button__link {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t}\n\n\t@for $i from 1 through 4 {\n\t\t&.wp-block-button__width-#{$i * 25} {\n\t\t\t.wp-block-button__link {\n\t\t\t\twidth: $i * 25%; // 25%, 50%, 75%, 100%\n\t\t\t}\n\t\t}\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"],"names":[],"sourceRoot":""}