:root {
    interpolate-size: allow-keywords;

    /* Colors */

    --ei-variation-color-background: #F5F5F5;
    --ei-variation-color-border: #CCC;
    --ei-variation-color-option-border: black;

    /* Spacing and sizing */
    --ei-variation-list-gap: 16px;
    --ei-variation-content-gap: 8px;
    --ei-variation-item-padding: 24px;
    --ei-variation-item-border-width: 2px;
    --ei-variation-item-border-radius: 4px;
    --ei-variation-option-size: 20px;
    --ei-variation-option-inset-width: 3px;
    --ei-variation-dropdown-size: 13px;

    /* Typography */
    --ei-variation-font-weight-bold: 800;

    /* Icons */
    --dropdown: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEzIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi41NjQgMC40NDI4NjFDMTIuMjgzMSAwLjE1OTQ4OSAxMS45MDAxIDAgMTEuNTAwNSAwQzExLjEwMDggMCAxMC43MTc4IDAuMTU5NDg5IDEwLjQzNyAwLjQ0Mjg2MUw2LjQ4Mzk0IDQuMzgyODZMMi41MzA5MiAwLjQ0Mjg2MUMxLjkzNzk1IC0wLjEwNzg1NyAxLjAxMzkxIC0wLjA5MTYwNjcgMC40NDA3OTMgMC40Nzk2MTdDLTAuMTMyMzE5IDEuMDUwODQgLTAuMTQ4NjIzIDEuOTcxODQgMC40MDM5MTUgMi41NjI4Nkw1LjQyMDQ0IDcuNTYyODZDNS43MDE3NyA3Ljg0NTE4IDYuMDg0NzIgOC4wMDM2MiA2LjQ4Mzk0IDguMDAyODZDNi44ODI3MyA4LjAwMTQyIDcuMjY0ODYgNy44NDMzMiA3LjU0NzQ1IDcuNTYyODZMMTIuNTY0IDIuNTYyODZDMTMuMTQ1MyAxLjk3NDk4IDEzLjE0NTMgMS4wMzA3NCAxMi41NjQgMC40NDI4NjFaIiBmaWxsPSIjQkIyNDJGIi8+PC9zdmc+") center / contain no-repeat;
}

/* Variation list */
table.variations tr,
.variable-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--ei-variation-list-gap);
}

.variable-items-wrapper {
    list-style: none;
    padding: 0;
}

/* Variation item */
.woo-variation-swatches li.variable-item {
    flex: 1;
    padding: var(--ei-variation-item-padding);
    margin: 0;
    border: var(--ei-variation-item-border-width) solid var(--ei-variation-color-border);
    border-radius: var(--ei-variation-item-border-radius);
    background: var(--ei-variation-color-background);
    transition: border-color 250ms;
}



/* Variation details */
.variable-item-contents details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        block-size 150ms ease,
        opacity 150ms ease,
        content-visibility 150ms allow-discrete;
}

.variable-item-contents details[open]::details-content {
    block-size: auto;
    opacity: 1;
}

/* Variation summary */
.variable-item-contents summary {
    display: flex;
    justify-content: space-between;
    ~ div {
        margin-top: 24px;
        font-family: 'Roboto';
        font-weight: 500;
        p:last-child {
            margin: unset;
        }
    }
}

.variable-item-contents summary .ei-variation-name {
    font-weight: var(--ei-variation-font-weight-bold);
}

.variable-item-contents summary .woocommerce-Price-amount,
.variable-item-contents summary .ei-see-more {
    color: var(--e-global-color-primary);
    font-weight: var(--ei-variation-font-weight-bold);
}

.variable-item-contents summary .ei-see-more {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ei-variation-content-gap);
    transition: color 250ms;
}

.variable-item-contents summary .ei-see-more::after {
    content: '';
    display: inline-block;
    width: var(--ei-variation-dropdown-size);
    height: var(--ei-variation-dropdown-size);
    mask: var(--dropdown);
    background-color: var(--e-global-color-primary);
    transition: background-color 250ms;
}

details[open] .ei-see-more::after {
    transform: rotate(180deg);
}

/* Variation option */
.ei-variation-option {
    display: flex;
    align-items: center;
    gap: var(--ei-variation-content-gap);
}

.ei-variation-option::before {
    content: '';
    display: inline-block;
    width: var(--ei-variation-option-size);
    height: var(--ei-variation-option-size);
    border: var(--ei-variation-item-border-width) solid var(--ei-variation-color-option-border);
    border-radius: 50%;
    transition: background-color 250ms;
    box-shadow: inset 0 0 0 var(--ei-variation-option-inset-width) var(--ei-variation-color-background);
}

/* Selected variation */
.woo-variation-swatches li.variable-item[aria-checked="true"] {
    border-color: var(--e-global-color-primary);
}

.woo-variation-swatches li.variable-item[aria-checked="true"] .ei-variation-option::before {
    background-color: var(--e-global-color-primary);
}

/* Hovered variation */
.woo-variation-swatches li.variable-item:hover:not([aria-checked="true"]) {
    border-color: black;
}

.woo-variation-swatches li.variable-item:hover:not([aria-checked="true"]) .ei-variation-option::before {
    background-color: black;
}

.woo-variation-swatches li.variable-item:hover .ei-see-more {
    color: rgb(135, 26, 34);
}

.woo-variation-swatches li.variable-item:hover .ei-see-more::after {
    background-color: rgb(135, 26, 34);
}