featured-category.css.map — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / featured-category.css.map
woocommerce / assets / client / blocks Last commit date
featured-category.css.map
1 lines
{"version":3,"file":"featured-category.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;ACtBA;EACC;EACA;EACA;EACA;ADwBD;;AAlEA;ECLC;EAwDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADoBD;ADoJE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAXkC;EAYlC;AClJH;ADuJE;EACC;ACrJH;ADoJE;EACC;AClJH;ADiJE;EACC;AC/IH;AD8IE;EACC;AC5IH;AD2IE;EACC;ACzIH;ADwIE;EACC;ACtIH;ADqIE;EACC;ACnIH;ADkIE;EACC;AChIH;AD+HE;EACC;AC7HH;AD4HE;EACC;AC1HH;AC9HC;EACC;ADgIF;AC/DC;EACC;ADiEF;AC/DE;;;;EAIC;EACA;ADiEH;AC7DC;EACC;AD+DF;AC7DE;;;;EAIC;EACA;AD+DH;AC3DC;EACC;EACA;AD6DF;AC1DC;EAIC;EACA;EACA;ADyDF;ACvDE;;;;;;;;;;;;;EAIC,WL9FK;AIgKR;AC9DC;EAKC;EACA;EACA;EACA;AD4DF;ACzDC;EFiKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEvKC;KAAA;ADmEF;ACjEE;EACC;ADmEH;AC9DG;EAND;IAOE;EDiEF;AACF;AC9DG;EAXD;IAYE;EDiEF;AACF;AC7DC;EACC;AD+DF;AC7DE;EACC;AD+DH;AC3DC;EACC;EACA;AD6DF;AC3DE;EACC;AD6DH;AC1DE;EACC;AD4DH;ACxDC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AD0DF;ACvDC;EACC;ADyDF,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/featured-items/featured-category/style.scss","webpack://wc/./assets/js/blocks/featured-items/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 \"../style\";\n\n.wp-block-woocommerce-featured-category {\n\t@extend %wp-block-featured-item;\n}\n\n.wc-block-featured-category {\n\t@include wc-block-featured-item();\n}\n","@mixin with-content-selection {\n\tbackground-color: inherit;\n\n\t&__selection {\n\t\twidth: 100%;\n\t}\n}\n\n%with-media-controls {\n\t// Applying image edits\n\t.is-applying {\n\t\t.components-spinner {\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: 50%;\n\t\t\tmargin-top: -9px;\n\t\t\tmargin-left: -9px;\n\t\t}\n\n\t\timg {\n\t\t\topacity: 0.3;\n\t\t}\n\t}\n}\n\n%with-resizable-box {\n\t.components-resizable-box__container {\n\t\tposition: absolute !important;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tmin-height: 50px;\n\n\t\t&:not(.is-resizing) {\n\t\t\theight: auto !important;\n\t\t}\n\t}\n\n\t.components-resizable-box__handle {\n\t\tz-index: 10;\n\t}\n}\n\n%wp-block-featured-item {\n\tbackground-color: transparent;\n\tborder-color: transparent;\n\tcolor: #fff;\n\tbox-sizing: border-box;\n}\n\n@mixin wc-block-featured-item {\n\t$block: &;\n\n\t@include with-background-dim();\n\t@include with-content-selection();\n\n\talign-content: center;\n\talign-items: center;\n\tbackground-position: center center;\n\tbackground-size: cover;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n\tmargin: 0 auto;\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100%;\n\n\t&.has-left-content {\n\t\tjustify-content: flex-start;\n\n\t\t#{$block}__description,\n\t\t#{$block}__price,\n\t\t#{$block}__title,\n\t\t#{$block}__variation {\n\t\t\tmargin-left: 0;\n\t\t\ttext-align: left;\n\t\t}\n\t}\n\n\t&.has-right-content {\n\t\tjustify-content: flex-end;\n\n\t\t#{$block}__description,\n\t\t#{$block}__price,\n\t\t#{$block}__title,\n\t\t#{$block}__variation {\n\t\t\tmargin-right: 0;\n\t\t\ttext-align: right;\n\t\t}\n\t}\n\n\t&.is-repeated {\n\t\tbackground-repeat: repeat;\n\t\tbackground-size: auto;\n\t}\n\n\t&__description,\n\t&__price,\n\t&__title,\n\t&__variation {\n\t\tline-height: 1.25;\n\t\tmargin-bottom: 0;\n\t\ttext-align: center;\n\n\t\ta,\n\t\ta:hover,\n\t\ta:focus,\n\t\ta:active {\n\t\t\tcolor: $white;\n\t\t}\n\t}\n\n\t&__description,\n\t&__link,\n\t&__price,\n\t&__title,\n\t&__variation {\n\t\tcolor: inherit;\n\t\twidth: 100%;\n\t\tpadding: 0 48px 16px 48px;\n\t\tz-index: 1;\n\t}\n\n\t& &__background-image {\n\t\t@include absolute-stretch();\n\t\tobject-fit: none;\n\n\t\t&.has-parallax {\n\t\t\tbackground-attachment: fixed;\n\n\t\t\t// Mobile Safari does not support fixed background attachment properly.\n\t\t\t// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios\n\t\t\t// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439\n\t\t\t@supports (-webkit-overflow-scrolling: touch) {\n\t\t\t\tbackground-attachment: scroll;\n\t\t\t}\n\n\t\t\t// Remove the appearance of scrolling based on OS-level animation preferences.\n\t\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\t\tbackground-attachment: scroll;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__description {\n\t\tcolor: inherit;\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t& &__title {\n\t\tcolor: inherit;\n\t\tmargin-top: 0;\n\n\t\tdiv {\n\t\t\tcolor: inherit;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\talign-content: center;\n\t\talign-items: center;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: center;\n\t\toverflow: hidden;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.wp-block-button.aligncenter {\n\t\ttext-align: center;\n\t}\n}\n"],"names":[],"sourceRoot":""}