/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/product/commerce-variant-selector.css?{ versionKey }"/> */

commerce_builder-variant-selector commerce-product-variant-selector lightning-combobox,
commerce_builder-variant-selector commerce-product-variant-selector commerce-product-variant-pill-container,
commerce_builder-variant-selector commerce-product-variant-selector commerce-product-variant-swatch-container {
    display: block;
    margin-bottom: 1rem;
}

commerce_builder-variant-selector commerce-product-variant-selector lightning-combobox:last-child,
commerce_builder-variant-selector commerce-product-variant-selector commerce-product-variant-pill-container:last-child,
commerce_builder-variant-selector commerce-product-variant-selector commerce-product-variant-swatch-container:last-child {
    margin-bottom: 0;
}

commerce_builder-variant-selector commerce-product-variant-selector lightning-combobox {
    width: 100%;
}

commerce_builder-variant-selector commerce-product-variant-selector commerce-product-variant-pill-container .slds-p-bottom_small {
    padding-bottom: 0;
}

commerce_builder-variant-selector commerce-product-variant-pill-container .pill-container {
    grid-column-gap: 1rem;
    grid-row-gap: 0.75rem;
}

commerce_builder-variant-selector commerce-product-variant-pill-container .pill-container .pill {
    min-width: 2.625rem;
    line-height: 1.5rem;
    text-align: center;
    font-weight: 500;
    outline: 2px solid transparent !important;
    outline-offset: -1px;
    transition: border-color 0.1s, outline-color 0.1s;
}

commerce_builder-variant-selector commerce-product-variant-pill-container .pill-container .pill:hover {
    border-color: var(--com-c-commerce-product-variant-pill-border-hover-color);
    box-shadow: unset !important;
}

commerce_builder-variant-selector commerce-product-variant-pill-container .pill-container .pill.selected,
commerce_builder-variant-selector commerce-product-variant-pill-container .pill-container .pill:focus {
    border-color: var(--dxp-s-button-border-color-focus);
    outline-color: var(--dxp-s-button-border-color-focus) !important;
    box-shadow: unset !important;
}

commerce_builder-variant-selector commerce-product-variant-swatch-container .color-swatch {
    grid-column-gap: 1rem;
    grid-row-gap: 0.75rem;
}

commerce_builder-variant-selector commerce-product-variant-swatch-item .square-section {
    --com-c-commerce-product-card-swatch-color-size: 2.625rem;
    outline: 2px solid transparent !important;
    outline-offset: -1px;
    cursor: pointer;
    transition: border-color 0.1s, outline-color 0.1s;
}

commerce_builder-variant-selector commerce-product-variant-swatch-item .square-section:hover {
    border-color: var(--com-c-commerce-product-variant-pill-border-hover-color);
    box-shadow: unset !important;
}

commerce_builder-variant-selector commerce-product-variant-swatch-item .square-section.selected,
commerce_builder-variant-selector commerce-product-variant-swatch-item .square-section:focus {
    border-color: var(--dxp-s-button-border-color-focus);
    outline-color: var(--dxp-s-button-border-color-focus) !important;
    box-shadow: unset !important;
}