/*! @version pwa-studio: 0.0.1, @magento/venia-ui: ~11.4.0, @magento/upward-security-headers: ~1.0.16, @magento/pwa-theme-venia: ~2.4.0, @magento/pwa-buildpack: ~11.5.3, @magento/peregrine: ~14.3.1, @magento/pagebuilder: ~9.3.1, @magento/eslint-config: ~1.5.0, @magento/babel-preset-peregrine: ~1.3.3, @apollo/client: ~3.5.0 */
.option-root-xj9 {
    padding-bottom: 1.5rem;
}

/* rewrite tileList root style */
.option-root-xj9 > div {
    display: flex;
    flex-wrap: wrap;
    /* grid-auto-flow: row; */
}

.option-title-YYr {
    display: block;
    margin-bottom: 0.5rem;

    font-size: 0.85rem;
    font-weight: 700;
}

.option-selection-0ug {
}

.option-selectionLabel-R7Q {
}

.swatchList-root-m0x {
}

.tile-root-zJL {
    position: relative;
}

.tile-root_selected-Kmb {
}

.tile-root_focused-Rt5 {
}

.tile-root_selected_focused-sYj {
}

.tile-root_outOfStock-Ps6,
.tile-root_selected_outOfStock-IAL {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity));
}

/* TODO @TW: review. This relies on custom prop to set color from JSX "style" prop. */
.swatch-root-6VC {
    --venia-swatch-bg: var(--venia-global-color-gray-100);

    border-color: rgba(0, 0, 0, 0.1);
    background: var(--venia-swatch-bg);
}

/* TODO @TW: review. This relies on custom prop to set color from JSX "style" prop. */
.swatch-root_selected--kC {

    background: linear-gradient(-45deg, rgba(0, 0, 0, 0.2), transparent),
        var(--venia-swatch-bg);
}

.swatch-root_focused-27- {
}

.swatch-root_selected_focused-WQx {
}

.swatch-checked-blv {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 256ms;
}

.swatch-unchecked-Aap {
    opacity: 0;
}

.swatch-root_outOfStock-Xid,
.swatch-root_selected_outOfStock-Ul1 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity));
}

.tile-root-5AN {
    
    position: relative;

    min-width: 3rem;
    padding: 0.5rem;

    border: 1px solid var(--color-grey-dark);
}

.tile-root_selected-VuB {

    color: #fff;
    background-color: var(--color-blue-light);
    border-color: var(--color-blue-light);
}

.tile-root_focused-4T6 {
}

.tile-root_selected_focused-miy {
}

.tile-root_outOfStock-XtV,
.tile-root_selected_outOfStock-iHa {
    
    opacity: 0.5;
}
.tile-root_outOfStock-XtV:after,
.tile-root_selected_outOfStock-iHa:after {
    /* content: '';
    position: absolute;
    border-top: 2px solid rgb(var(--venia-global-color-gray-400));
    width: 62px;
    transform: rotate(-45deg); */
}