/* ===== BUTTON COMPONENT ===== */

:root {
    /* Button Variables */
    --Button-Height-Default: var(--UI-Input-md);
    
    --Colors-Shadow-Focus-Button: rgba(92, 148, 255, 0.20);

    --Colors-Buttons-Primary-Default: var(--Colors-Base-Primary-700);
    --Colors-Buttons-Primary-Default-Text: var(--Colors-Base-Neutral-00);
    --Colors-Buttons-Primary-Hover: var(--Colors-Base-Primary-700);
    --Colors-Buttons-Primary-Pressed: var(--Colors-Base-Primary-900);
    --Colors-Buttons-Primary-Stroke-Focus: var(--Colors-Base-Primary-900);
    --Colors-Buttons-Secondary-Default: var(--Colors-Base-Primary-700);
    --Colors-Buttons-Secondary-Default-Text: var(--Colors-Base-Primary-700);
    --Colors-Buttons-Secondary-Hover: var(--Colors-Base-Primary-800);
    --Colors-Buttons-Secondary-Hover-Text: var(--Colors-Base-Primary-800);
    --Colors-Buttons-Secondary-Pressed: var(--Colors-Base-Primary-900);
    --Colors-Buttons-Secondary-Pressed-Text: var(--Colors-Base-Primary-900);
    --Colors-Buttons-Tertiary-Default: var(--Colors-Base-Neutral-300);
    --Colors-Buttons-Tertiary-Default-Background: var(--Colors-Base-Neutral-00);
    --Colors-Buttons-Tertiary-Default-Text: var(--Colors-Base-Neutral-1000);
    --Colors-Buttons-Tertiary-Hover: var(--Colors-Base-Neutral-600);
    --Colors-Buttons-Tertiary-Hover-Text: var(--Colors-Base-Neutral-1200);
    --Colors-Buttons-Tertiary-Hover-Background: var(--Colors-Base-Neutral-00);
    --Colors-Buttons-Tertiary-Pressed: var(--Colors-Base-Neutral-750);
    --Colors-Buttons-Tertiary-Pressed-Text: var(--Colors-Base-Neutral-1200);
    --Colors-Button-Danger-Default: var(--Colors-Base-Accent-Red-600);
    --Colors-Buttons-Danger-Hover: var(--Colors-Base-Accent-Red-700);
    --Colors-Buttons-Danger-Stroke-Focus: var(--Colors-Base-Accent-Red-800);
    --Colors-Shadow-Focus-Button-Danger: rgba(184, 6, 44, 0.12);
    --Colors-Buttons-Danger-Pressed: var(--Colors-Base-Accent-Red-800);
    --Colors-Buttons-Success-Default: var(--Colors-Base-Accent-Green-600);
    --Colors-Buttons-Success-Hover: var(--Colors-Base-Accent-Green-700);
    --Colors-Buttons-Success-Stroke-Focus: var(--Colors-Base-Accent-Green-800);
    --Colors-Shadow-Focus-Button-Success: rgba(25, 158, 89, 0.14);
    --Colors-Buttons-Success-Pressed: var(--Colors-Base-Accent-Green-800);

    --Colors-Buttons-Text-Default: var(--Colors-Base-Neutral-1000);
    --Colors-Buttons-Text-Primary: var(--Colors-Base-Primary-700);
    --Colors-Buttons-Text-Primary-Hover: var(--Colors-Base-Primary-800);
    --Colors-Buttons-Text-Pressed: var(--Colors-Base-Neutral-1300);
    --Colors-Buttons-Text-Primary-Pressed: var(--Colors-Base-Primary-900);
}

@media (prefers-color-scheme: dark) {
    :root {
        --Colors-Buttons-Secondary-Default: var(--Colors-Base-Primary-600);
        --Colors-Buttons-Secondary-Default-Text: var(--Colors-Base-Primary-600);
        --Colors-Buttons-Secondary-Hover: var(--Colors-Base-Primary-500);
        --Colors-Buttons-Secondary-Hover-Text: var(--Colors-Base-Primary-500);
        --Colors-Buttons-Secondary-Pressed: var(--Colors-Base-Primary-650);
        --Colors-Buttons-Secondary-Pressed-Text: var(--Colors-Base-Primary-650);
        --Colors-Buttons-Tertiary-Default-Background: var(--Colors-Base-Neutral-Alphas-1200-25);
        --Colors-Buttons-Tertiary-Default-Text: var(--Colors-Base-Neutral-500);
        --Colors-Buttons-Tertiary-Hover: var(--Colors-Base-Neutral-1100);
        --Colors-Buttons-Tertiary-Hover-Text: var(--Colors-Base-Neutral-300);
        --Colors-Buttons-Tertiary-Hover-Background: var(--Colors-Base-Neutral-Alphas-1050-25);
        --Colors-Buttons-Tertiary-Pressed: var(--Colors-Base-Neutral-1000);
        --Colors-Buttons-Tertiary-Pressed-Text: var(--Colors-Base-Neutral-300);

        --Colors-Buttons-Text-Default: var(--Colors-Base-Neutral-700);
        --Colors-Buttons-Text-Primary: var(--Colors-Base-Primary-500);
        --Colors-Buttons-Text-Primary-Hover: var(--Colors-Base-Primary-400);
        --Colors-Buttons-Text-Pressed: var(--Colors-Base-Neutral-900);
        --Colors-Buttons-Text-Primary-Pressed: var(--Colors-Base-Primary-700);
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--Button-Height-Default);
    padding: 0 var(--UI-Spacing-spacing-ml);
    gap: var(--UI-Spacing-spacing-s);

    border-radius: var(--UI-Radius-radius-xs);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    
    /* Typography - typically buttons match label style or specific body style */
    font-family: var(--body-family);
    font-size: var(--Fonts-Body-Default-lg);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.17px;
}

.button:disabled,
.button.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.24;
}

/* Primary Button Variant */
.button-primary {
    background-color: var(--Colors-Buttons-Primary-Default);
    color: var(--Colors-Buttons-Primary-Default-Text);
}

.button-primary:hover,
.button-primary.hover {
    background-color: var(--Colors-Buttons-Primary-Hover);
}

.button-primary:active,
.button-primary.active {
    background-color: var(--Colors-Buttons-Primary-Pressed);
}

.button-primary:focus
.button-primary.focus {
    border: 1px solid var(--Colors-Buttons-Primary-Stroke-Focus);
    background: var(--Colors-Buttons-Primary-Hover);
    box-shadow: 0 0 0 4px var(--Colors-Shadow-Focus-Button);
}

.button-secondary {
    background-color: transparent;
    border: 1.5px solid var(--Colors-Buttons-Secondary-Default);
    color: var(--Colors-Buttons-Secondary-Default-Text);
}

.button-secondary:hover,
.button-secondary.hover {
    border: 1.5px solid var(--Colors-Buttons-Secondary-Hover);
    color: var(--Colors-Buttons-Secondary-Hover-Text);
}

.button-secondary:focus,
.button-secondary.focus {
    border: 1.5px solid var(--Colors-Buttons-Secondary-Hover);
    color: var(--Colors-Buttons-Secondary-Hover-Text);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25);
}

.button-secondary:active,
.button-secondary.active {
    border: 1.5px solid var(--Colors-Buttons-Secondary-Pressed);
    color: var(--Colors-Buttons-Secondary-Pressed-Text);
}

.button-secondary:disabled,
.button-secondary.disabled {
    opacity: 0.3;
}

.button-tertiary {
    border: 1.5px solid var(--Colors-Buttons-Tertiary-Default);
    background: var(--Colors-Buttons-Tertiary-Default-Background);
    color: var(--Colors-Buttons-Tertiary-Default-Text);
}

.button-tertiary:hover,
.button-tertiary.hover {
    border: 1.5px solid var(--Colors-Buttons-Tertiary-Hover);
    background: var(--Colors-Buttons-Tertiary-Hover-Background);
    color: var(--Colors-Buttons-Tertiary-Hover-Text);
}

.button-tertiary:focus,
.button-tertiary.focus {
    border: 1.5px solid var(--Colors-Buttons-Tertiary-Hover);
    background: var(--Colors-Buttons-Tertiary-Hover-Background);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25);
    color: var(--Colors-Buttons-Tertiary-Hover-Text);
}

.button-tertiary:active,
.button-tertiary.active {
    border: 1.5px solid var(--Colors-Buttons-Tertiary-Pressed);
    color: var(--Colors-Buttons-Tertiary-Pressed-Text);
}

.button-tertiary:disabled,
.button-tertiary.disabled {
    opacity: 0.3;
}

.button-danger {
    background-color: var(--Colors-Button-Danger-Default);
    color: var(--Colors-Buttons-Primary-Default-Text);
}

.button-danger:hover,
.button-danger.hover {
    background: var(--Colors-Buttons-Danger-Hover);
}

.button-danger:focus,
.button-danger.focus {
    border: 1px solid var(--Colors-Buttons-Danger-Stroke-Focus);
    background: var(--Colors-Buttons-Danger-Hover);
    box-shadow: 0 0 0 4px var(--Colors-Shadow-Focus-Button-Danger);
}

.button-danger:active,
.button-danger.active {
    background: var(--Colors-Buttons-Danger-Pressed);
}

.button-success {
    background: var(--Colors-Buttons-Success-Default);
    color: var(--Colors-Buttons-Primary-Default-Text);
}

.button-success:hover,
.button-success.hover {
    background: var(--Colors-Buttons-Success-Hover);
}

.button-success:focus,
.button-success.focus {
    border: 1px solid var(--Colors-Buttons-Success-Stroke-Focus);
    background: var(--Colors-Buttons-Success-Hover);
    box-shadow: 0 0 0 4px var(--Colors-Shadow-Focus-Button-Success);
}

.button-success:active,
.button-success.active {
    background: var(--Colors-Buttons-Success-Pressed);
}

.button-text,
.button-text.button-medium,
.button-text.button-large,
.button-text-primary,
.button-text-primary.button-medium,
.button-text-primary.button-large {
    background: transparent;
    display: flex;
    gap: var(--UI-Spacing-spacing-xs);
    align-items: stretch;
    color: var(--Colors-Buttons-Text-Default);
    text-align: center;
    font-family: var(--body-family);
    font-size: var(--Fonts-Body-Default-md);
    font-style: normal;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: -0.24px;
    height: initial;
    padding: 0;
    border-radius: 0;
}

.button-text.button-small,
.button-text.button-xsmall,
.button-text-primary.button-small,
.button-text-primary.button-xsmall {
    height: initial;
    padding: 0;
    gap: var(--UI-Spacing-spacing-xs);
    flex-shrink: 0;

    font-size: var(--Fonts-Body-Default-xs);
    line-height: 135%;
    letter-spacing: -0.14px;
}

.button-text:hover,
.button-text.hover {
    color: var(--Colors-Buttons-Text-Primary);
}

.button-text:focus,
.button-text.focus {
    color: var(--Colors-Buttons-Text-Primary);
    border-bottom: 1px solid var(--Colors-Buttons-Text-Primary);
}

.button-text:active,
.button-text.active {
    color: var(--Colors-Buttons-Text-Pressed);
    border-bottom: 1px solid var(--Colors-Buttons-Text-Pressed);
}

.button-text:disabled,
.button-text.disabled {
    opacity: 0.3;
}

.button-text-primary,
.button-text-primary.button-medium,
.button-text-primary.button-large,
.button-text-primary.button-xsmall,
.button-text-primary.button-small {
    color: var(--Colors-Buttons-Text-Primary);
}

.button-text-primary:hover,
.button-text-primary.hover {
    color: var(--Colors-Buttons-Text-Primary-Hover);
}

.button-text-primary:focus,
.button-text-primary.focus {
    color: var(--Colors-Buttons-Text-Primary-Hover);
    border-bottom: 1px solid var(--Colors-Buttons-Text-Primary-Hover);
}

.button-text-primary:active,
.button-text-primary.active {
    color: var(--Colors-Buttons-Text-Primary-Pressed);
    border-bottom: 1px solid var(--Colors-Buttons-Text-Primary-Pressed);
}

.button-text-primary:disabled,
.button-text-primary.disabled {
    color: var(--Colors-Buttons-Primary-Default);
    opacity: 0.3;
}

.button-xsmall {
    height: var(--UI-Input-xs);
    padding: 0 var(--UI-Spacing-spacing-mxs);
    gap: var(--UI-Spacing-spacing-s);
    flex-shrink: 0;

    font-size: var(--Fonts-Body-Default-xs);
    line-height: 135%;
    letter-spacing: -0.14px;
}

.button-small {
    height: var(--UI-Input-sm);
    padding: 0 var(--UI-Spacing-spacing-ms);
    gap: var(--UI-Spacing-spacing-s);

    font-size: var(--Fonts-Body-Default-sm);
    line-height: 135%;
    letter-spacing: -0.15px;
}

.button-large {
    height: var(--UI-Input-lg);
    padding: 0 var(--UI-Spacing-spacing-mxl);
    gap: var(--UI-Spacing-spacing-s);

    font-size: var(--Fonts-Body-Default-xl);
    line-height: 140%;
    letter-spacing: -0.19px;
}