/*
================================================

Space Vanta Theme 1.0

Module:
Cart Variant Selector

File:
public/cart/cs/variant-selector.css

Version:
1.0

Purpose:
Cart Variant Selector Visual System

DNA:
Spatial
Constructed
Minimal
Metallic
Restrained

Responsibilities:

- Variant Area layout
- Configure trigger
- Add / Replace mode switch
- Variant matrix
- Variant choice
- Add quantity
- Final action
- Mobile adaptation

Does NOT handle:

- Current Variant typography
- Cart quantity control
- Cart item layout
- Cart API

================================================
*/


/* =================================================
   VARIANT AREA
================================================= */

.sv-cart-item__variant-area {
    width: 100%;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(190px, 0.72fr);
    column-gap: 24px;
    align-items: start;
}


/* =================================================
   SELECTOR
================================================= */

.sv-cart-item__variant-selector {
    width: 100%;
    min-width: 0;
    position: relative;
}


/* =================================================
   CONFIGURE TRIGGER
================================================= */

.sv-cart-item__variant-selector-trigger {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    min-height: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 0 8px;

    border: 0;
    border-bottom: 1px solid rgba(35, 42, 48, 0.20);

    background: transparent;

    color: inherit;

    cursor: pointer;

    text-align: left;

    transition:
        border-color 180ms ease,
        opacity 180ms ease;
}


.sv-cart-item__variant-selector-trigger:hover {
    border-bottom-color: rgba(35, 42, 48, 0.48);
}


.sv-cart-item__variant-selector-trigger-label {
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    opacity: 0.68;
}


.sv-cart-item__variant-selector-trigger-icon {
    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    line-height: 1;
    font-weight: 300;

    opacity: 0.58;

    transition:
        transform 220ms ease,
        opacity 180ms ease;
}


.sv-cart-item__variant-selector-trigger[aria-expanded="true"] .sv-cart-item__variant-selector-trigger-icon {
    transform: rotate(45deg);
    opacity: 0.82;
}


/* =================================================
   PANEL
================================================= */

.sv-cart-item__variant-selector-panel {
    width: 100%;

    padding-top: 12px;
}


.sv-cart-item__variant-selector-panel[hidden],
.sv-cart-item__variant-selector-workspace[hidden] {
    display: none;
}


/* =================================================
   MODE SWITCH
================================================= */

.sv-cart-item__variant-selector-modes {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    border-bottom: 1px solid rgba(35, 42, 48, 0.12);
}


.sv-cart-item__variant-selector-mode {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    min-height: 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 0 8px;

    border: 0;
    background: transparent;

    color: inherit;

    cursor: pointer;

    text-align: left;

    opacity: 0.46;

    transition:
        opacity 180ms ease;
}


.sv-cart-item__variant-selector-mode+.sv-cart-item__variant-selector-mode {
    padding-left: 18px;
}


.sv-cart-item__variant-selector-mode:hover {
    opacity: 0.78;
}


.sv-cart-item__variant-selector-mode[aria-pressed="true"] {
    opacity: 0.94;
}


.sv-cart-item__variant-selector-mode[aria-pressed="true"]::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background: rgba(35, 42, 48, 0.72);
}


.sv-cart-item__variant-selector-mode-label {
    font-size: 9px;
    line-height: 1;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.sv-cart-item__variant-selector-mode-arrow {
    font-size: 11px;
    line-height: 1;

    opacity: 0.52;
}


/* =================================================
   WORKSPACE
================================================= */

.sv-cart-item__variant-selector-workspace {
    width: 100%;

    padding-top: 14px;
}


/* =================================================
   VARIANT MATRIX
================================================= */

.sv-cart-item__variant-selector-matrix {
    width: 100%;

    display: flex;
    flex-direction: column;
}


.sv-cart-item__variant-selector-choice {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 0;

    border: 0;
    border-bottom: 1px solid rgba(35, 42, 48, 0.10);

    background: transparent;

    color: inherit;

    cursor: pointer;

    text-align: left;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        opacity 180ms ease;
}


.sv-cart-item__variant-selector-choice:first-child {
    border-top: 1px solid rgba(35, 42, 48, 0.10);
}


.sv-cart-item__variant-selector-choice:hover:not(:disabled) {
    background: rgba(35, 42, 48, 0.035);
    border-bottom-color: rgba(35, 42, 48, 0.26);
}


.sv-cart-item__variant-selector-choice[aria-pressed="true"] {
    background: rgba(35, 42, 48, 0.055);
    border-bottom-color: rgba(35, 42, 48, 0.48);
}


.sv-cart-item__variant-selector-choice:disabled {
    cursor: not-allowed;
    opacity: 0.28;
}


.sv-cart-item__variant-selector-choice-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.sv-cart-item__variant-selector-choice-title {
    font-size: 11px;
    line-height: 1.35;

    letter-spacing: 0.025em;

    opacity: 0.90;
}


.sv-cart-item__variant-selector-choice-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 4px;

    font-size: 9px;
    line-height: 1.3;

    letter-spacing: 0.055em;

    opacity: 0.52;
}


.sv-cart-item__variant-selector-choice-option {
    white-space: nowrap;
}


.sv-cart-item__variant-selector-choice-separator {
    opacity: 0.42;
}


.sv-cart-item__variant-selector-choice-arrow {
    flex: 0 0 auto;

    margin-left: 14px;

    font-size: 11px;
    line-height: 1;

    opacity: 0.42;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}


.sv-cart-item__variant-selector-choice:hover:not(:disabled) .sv-cart-item__variant-selector-choice-arrow {
    transform: translateX(2px);
    opacity: 0.82;
}


/* =================================================
   EMPTY STATE
================================================= */

.sv-cart-item__variant-selector-empty {
    padding: 12px 0;

    border-top: 1px solid rgba(35, 42, 48, 0.10);
    border-bottom: 1px solid rgba(35, 42, 48, 0.10);

    font-size: 9px;
    line-height: 1.5;

    letter-spacing: 0.06em;

    opacity: 0.48;
}


.sv-cart-item__variant-selector-empty[hidden] {
    display: none;
}


/* =================================================
   ADD QUANTITY
================================================= */

.sv-cart-item__variant-selector-quantity {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 14px;
    padding: 10px 0;

    border-top: 1px solid rgba(35, 42, 48, 0.10);
    border-bottom: 1px solid rgba(35, 42, 48, 0.10);
}


.sv-cart-item__variant-selector-quantity[hidden] {
    display: none;
}


.sv-cart-item__variant-selector-quantity-label {
    font-size: 9px;
    line-height: 1;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    opacity: 0.48;
}


.sv-cart-item__variant-selector-quantity-control {
    display: flex;
    align-items: center;

    gap: 12px;
}


.sv-cart-item__variant-selector-quantity-button {
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(35, 42, 48, 0.18);

    background: transparent;

    color: inherit;

    cursor: pointer;

    font-size: 12px;
    line-height: 1;

    opacity: 0.68;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        opacity 180ms ease;
}


.sv-cart-item__variant-selector-quantity-button:hover {
    border-color: rgba(35, 42, 48, 0.44);
    background: rgba(35, 42, 48, 0.04);
    opacity: 1;
}


.sv-cart-item__variant-selector-quantity-value {
    min-width: 12px;

    text-align: center;

    font-size: 11px;
    line-height: 1;

    letter-spacing: 0.05em;

    opacity: 0.82;
}


/* =================================================
   STATUS
================================================= */

.sv-cart-item__variant-selector-status {
    min-height: 18px;

    padding-top: 8px;

    font-size: 9px;
    line-height: 1.5;

    letter-spacing: 0.035em;

    opacity: 0.52;
}


.sv-cart-item__variant-selector-status:empty {
    min-height: 0;
    padding-top: 0;
}


/* =================================================
   FINAL ACTION
================================================= */

.sv-cart-item__variant-selector-submit {
    position: relative;

    overflow: hidden;

    width: 100%;
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 8px;
    padding: 0 12px;

    border: 1px solid rgba(35, 42, 48, 0.30);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.78),
            rgba(205, 211, 216, 0.58),
            rgba(255, 255, 255, 0.72));

    color: #252c31;

    cursor: pointer;

    font-size: 9px;
    line-height: 1;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    opacity: 0.92;

    transition:
        border-color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}


.sv-cart-item__variant-selector-submit::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: -35%;

    width: 28%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.65),
            transparent);

    transform: skewX(-18deg);

    transition:
        left 500ms ease;
}


.sv-cart-item__variant-selector-submit:hover:not(:disabled)::before {
    left: 125%;
}


.sv-cart-item__variant-selector-submit:hover:not(:disabled) {
    border-color: rgba(35, 42, 48, 0.55);
}


.sv-cart-item__variant-selector-submit:active:not(:disabled) {
    transform: translateY(1px);
}


.sv-cart-item__variant-selector-submit:disabled {
    cursor: not-allowed;

    opacity: 0.28;

    border-color: rgba(35, 42, 48, 0.14);
}


.sv-cart-item__variant-selector-submit-label,
.sv-cart-item__variant-selector-submit-arrow {
    position: relative;
    z-index: 1;
}


.sv-cart-item__variant-selector-submit-arrow {
    font-size: 12px;
    opacity: 0.58;
}


/* =================================================
   MOBILE
================================================= */

@media (max-width: 767px) {

    .sv-cart-item__variant-area {
        display: flex;
        flex-direction: column;

        row-gap: 10px;
    }


    .sv-cart-item__variant-selector {
        width: 100%;
    }


    .sv-cart-item__variant-selector-trigger {
        min-height: 31px;
    }


    .sv-cart-item__variant-selector-panel {
        padding-top: 11px;
    }


    .sv-cart-item__variant-selector-modes {
        grid-template-columns: 1fr 1fr;
    }


    .sv-cart-item__variant-selector-choice {
        min-height: 42px;
    }


    .sv-cart-item__variant-selector-choice-title {
        font-size: 10px;
    }


    .sv-cart-item__variant-selector-choice-options {
        font-size: 8px;
    }


    .sv-cart-item__variant-selector-submit {
        min-height: 42px;
    }

}