/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: controls.css
 * Description: Global Controls
 *
 * Depends:
 * tokens.css
 * spacing.css
 * motion.css
 *
 * Version:
 * 2.1.0
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */


/* ==========================================================
   INPUT
========================================================== */

.gm-input{

    width:100%;

    height:var(--gm-input-height);

    padding:0 var(--gm-space-lg);

    border:1px solid var(--gm-color-border);

    border-radius:var(--gm-input-radius);

    background:var(--gm-color-white);

    color:var(--gm-color-text);

    font-family:var(--gm-font-family);

    font-size:var(--gm-font-size-md);

    transition:var(--gm-transition-fast);

}

.gm-input:hover{

    border-color:#d3d3d3;

}

.gm-input:focus{

    outline:none;

    border-color:var(--gm-color-primary);

}

.gm-input:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

    border-color:var(--gm-color-primary);

}


/* ==========================================================
   SELECT
========================================================== */

.gm-select{

    appearance:none;

    -webkit-appearance:none;

    width:100%;

    height:var(--gm-input-height);

    padding:0 48px 0 var(--gm-space-lg);

    border:1px solid var(--gm-color-border);

    border-radius:var(--gm-input-radius);

    background:var(--gm-color-white);

    color:var(--gm-color-text);

    font-family:var(--gm-font-family);

    font-size:var(--gm-font-size-md);

    transition:var(--gm-transition-fast);

}

.gm-select:hover{

    border-color:#d3d3d3;

}

.gm-select:focus{

    outline:none;

    border-color:var(--gm-color-primary);

}

.gm-select:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

    border-color:var(--gm-color-primary);

}


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

.gm-quantity{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--gm-gap-sm);

    height:var(--gm-input-height);

    padding:0 var(--gm-space-sm);

    border:1px solid var(--gm-color-border);

    border-radius:var(--gm-radius-pill);

    background:var(--gm-color-white);

    transition:var(--gm-transition-fast);

}

.gm-quantity:hover{

    border-color:#d3d3d3;

}

.gm-quantity:focus-within{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

    border-color:var(--gm-color-primary);

}

.gm-quantity input{

    flex:1;

    min-width:44px;

    border:none;

    background:none;

    color:var(--gm-color-text);

    text-align:center;

    font-family:var(--gm-font-family);

    font-size:var(--gm-font-size-lg);

    font-weight:var(--gm-font-weight-semibold);

}

.gm-quantity input:focus{

    outline:none;

}


/* ==========================================================
   QUANTITY BUTTON
========================================================== */

.gm-qty-button{

    width:var(--gm-qty-button-size);

    height:var(--gm-qty-button-size);

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:transparent;

    color:var(--gm-color-text);

    cursor:pointer;

    transition:var(--gm-transition-fast);

}

.gm-qty-button:hover{

    background:var(--gm-color-background-muted);

}

.gm-qty-button:active{

    transform:scale(.95);

}

.gm-qty-button:disabled{

    opacity:.4;

    cursor:not-allowed;

    pointer-events:none;

}

.gm-qty-button:focus{

    outline:none;

}

.gm-qty-button:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

}


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

.gm-switch{

    position:relative;

    width:54px;

    height:30px;

    border-radius:var(--gm-radius-pill);

    background:var(--gm-color-border);

    cursor:pointer;

    transition:var(--gm-transition-fast);

}

.gm-switch::after{

    content:"";

    position:absolute;

    left:3px;

    top:3px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--gm-color-white);

    transition:var(--gm-transition-fast);

}

.gm-switch.active{

    background:var(--gm-color-primary);

}

.gm-switch.active::after{

    transform:translateX(24px);

}

.gm-switch:focus{

    outline:none;

}

.gm-switch:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

}


/* ==========================================================
   SEGMENT
========================================================== */

.gm-segment{

    display:flex;

    gap:var(--gm-gap-sm);

}

.gm-segment button{

    height:var(--gm-button-height-md);

    padding:0 var(--gm-space-lg);

    border:1px solid var(--gm-color-border);

    border-radius:var(--gm-radius-pill);

    background:var(--gm-color-white);

    color:var(--gm-color-text);

    font-family:var(--gm-font-family);

    font-size:var(--gm-font-size-md);

    cursor:pointer;

    transition:var(--gm-transition-fast);

}

.gm-segment button:hover{

    border-color:var(--gm-color-primary);

}

.gm-segment button.active{

    background:var(--gm-color-primary);

    color:var(--gm-color-white);

    border-color:var(--gm-color-primary);

}

.gm-segment button:focus{

    outline:none;

}

.gm-segment button:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

}


/* ==========================================================
   CHECKBOX
========================================================== */

.gm-checkbox{

    width:22px;

    height:22px;

    border:1px solid var(--gm-color-border);

    border-radius:6px;

    background:var(--gm-color-white);

}

.gm-checkbox:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

}


/* ==========================================================
   RADIO
========================================================== */

.gm-radio{

    width:22px;

    height:22px;

    border:1px solid var(--gm-color-border);

    border-radius:50%;

    background:var(--gm-color-white);

}

.gm-radio:focus-visible{

    outline:var(--gm-focus-ring);

    outline-offset:var(--gm-focus-ring-offset);

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .gm-input,
    .gm-select,
    .gm-quantity,
    .gm-qty-button,
    .gm-switch,
    .gm-switch::after,
    .gm-segment button{

        transition:none;

    }

    .gm-qty-button:active{

        transform:none;

    }

}