/* ============================================================================
   06-COMPONENTS -> #BUTTON
   ========================================================================= */

/**
 * Highlights an action to make it more obvious to the user.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;
 

/**
 * Button
 *
 * 1. Subtract the border-width Y padding to maintain correct size.
 * 2. Allow a hidden checkbox to alter the state of the button.
 */

.button {
    --button-bg: transparent;
    --button-color: var(--text-color-primary);
    --button-border-color: transparent;
    --button-shadow: var(--shadow-xs);
    --button-border-radius: var(--rounded-md);
    --button-border-width: var(--border-width);
    --button-font-size: #{deep-map-get($font-size, 'sm', 'font-size')};
    --button-font-weight: var(--font-weight-semi-bold);
    --button-height: var(--space-10);
    --button-icon-size: var(--icon-size-md);
    --button-line-height: #{deep-map-get($font-size, 'sm', 'line-height')};
    --button-padding-x: var(--space-4);
    --button-padding-y: .625rem;
    --button-hover-bg: transparent;
    --button-hover-border-color: transparent;
    --button-hover-color: var(--text-color-primary);
    --button-active-bg: transparent;
    --button-active-border-color: transparent;
    --button-active-color: var(--text-color-primary);
    --button-disabled-bg: transparent;
    --button-disabled-border-color: transparent;
    --button-disabled-color: var(--text-color-tertiary);
    --button-focus-ring-color: transparent;
    --button-focus-ring-size: var(--space-1);
    
    @include transition(('background-color', 'border', 'box-shadow', 'color'));
    align-items: center;
    appearance: none;
    background-color: var(--button-bg);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    box-shadow: var(--button-shadow);
    color: var(--button-color);
    column-gap: var(--space-2);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    justify-content: center;
    line-height: var(--button-line-height);
    outline: 0;
    padding-bottom: calc(var(--button-padding-y) - var(--button-border-width)); // [1]
    padding-left: var(--button-padding-x);
    padding-right: var(--button-padding-x);
    padding-top: calc(var(--button-padding-y) - var(--button-border-width)); // [1]
    position: relative;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
        background-color: var(--button-hover-bg);
        border-color: var(--button-hover-border-color);
        color: var(--button-hover-color);
    }

    &:active {
        background-color: var(--button-active-bg);
        border-color: var(--button-active-border-color);
        color: var(--button-active-color);
    }

    &:focus {
        box-shadow: 0 0 0 var(--button-focus-ring-size) var(--button-focus-ring-color);
    }

    &:disabled,
    &[aria-disabled=true] {
        background-color: var(--button-disabled-bg);
        border-color: var(--button-disabled-border-color);
        color: var(--button-disabled-color);
        cursor: not-allowed;
        pointer-events: none;
    }

    & > .icon {
        --icon-size: var(--button-icon-size);
    }
}

input:checked + .button { // [2]
    background-color: var(--button-hover-bg);
    color: var(--button-hover-color);
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Primary button
 */

.button[data-theme=primary] {
    --button-bg: var(--button-primary-bg);
    --button-border-color: var(--button-primary-border-color);
    --button-color: var(--button-primary-color);
    --button-hover-bg: var(--button-primary-hover-bg);
    --button-hover-border-color: var(--button-primary-hover-border-color);
    --button-hover-color: var(--button-primary-hover-color);
    --button-active-bg: var(--button-primary-active-bg);
    --button-active-border-color: var(--button-primary-active-border-color);
    --button-active-color: var(--button-primary-active-color);
    --button-disabled-bg: var(--button-primary-disabled-bg);
    --button-disabled-border-color: var(--button-primary-disabled-border-color);
    --button-disabled-color: var(--button-primary-disabled-color);
    --button-focus-ring-color: var(--button-primary-focus-ring-color);
}


/**
 * Modifier: Primary muted action button
 */

.button[data-theme=primary-muted] {
    --button-bg: var(--button-primary-muted-bg);
    --button-border-color: var(--button-primary-muted-border-color);
    --button-color: var(--button-primary-muted-color);
    --button-hover-bg: var(--button-primary-muted-hover-bg);
    --button-hover-border-color: var(--button-primary-muted-hover-border-color);
    --button-hover-color: var(--button-primary-muted-hover-color);
    --button-active-bg: var(--button-primary-muted-active-bg);
    --button-active-border-color: var(--button-primary-muted-active-border-color);
    --button-active-color: var(--button-primary-muted-active-color);
    --button-disabled-bg: var(--button-primary-muted-disabled-bg);
    --button-disabled-border-color: var(--button-primary-muted-disabled-border-color);
    --button-disabled-color: var(--button-primary-muted-disabled-color);
    --button-focus-ring-color: var(--button-primary-muted-focus-ring-color);
}


/**
 * Modifier: Secondary button
 */

.button[data-theme=secondary] {
    --button-bg: var(--button-secondary-bg);
    --button-border-color: var(--button-secondary-border-color);
    --button-color: var(--button-secondary-color);
    --button-hover-bg: var(--button-secondary-hover-bg);
    --button-hover-border-color: var(--button-secondary-hover-border-color);
    --button-hover-color: var(--button-secondary-hover-color);
    --button-active-bg: var(--button-secondary-active-bg);
    --button-active-border-color: var(--button-secondary-active-border-color);
    --button-active-color: var(--button-secondary-active-color);
    --button-disabled-bg: var(--button-secondary-disabled-bg);
    --button-disabled-border-color: var(--button-secondary-disabled-border-color);
    --button-disabled-color: var(--button-secondary-disabled-color);
    --button-focus-ring-color: var(--button-secondary-focus-ring-color);
}


/**
 * Modifier: Tertiary button
 */

.button[data-theme=tertiary] {
    --button-bg: var(--tertiary-button-bg);
    --button-color: var(--tertiary-button-color);
    --button-border-color: var(--tertiary-button-border-color);
    --button-shadow: none;
    --button-active-bg: var(--tertiary-button-active-bg);
    --button-disabled-bg: var(--tertiary-button-disabled-bg);
    --button-disabled-color: var(--tertiary-button-disabled-color);
    --button-disabled-border-color: var(--tertiary-button-disabled-border-color);
    --button-focus-border-color: var(--tertiary-button-focus-border-color);
    --button-hover-bg: var(--tertiary-button-hover-bg);
    --button-hover-border-color: var(--tertiary-button-hover-border-color);
    --button-hover-color: var(--tertiary-button-hover-color);
}


/**
 * Modifier: Error button
 */

.button[data-theme=error] {
    --button-bg: var(--button-error-bg);
    --button-border-color: var(--button-error-border-color);
    --button-color: var(--button-error-color);
    --button-hover-bg: var(--button-error-hover-bg);
    --button-hover-border-color: var(--button-error-hover-border-color);
    --button-hover-color: var(--button-error-hover-color);
    --button-active-bg: var(--button-error-active-bg);
    --button-active-border-color: var(--button-error-active-border-color);
    --button-active-color: var(--button-error-active-color);
    --button-disabled-bg: var(--button-error-disabled-bg);
    --button-disabled-border-color: var(--button-error-disabled-border-color);
    --button-disabled-color: var(--button-error-disabled-color);
    --button-focus-ring-color: var(--button-error-focus-ring-color);
}


/**
 * Modifier: Success button
 */

.button[data-theme=success] {
    --button-bg: var(--button-success-bg);
    --button-border-color: var(--button-success-border-color);
    --button-color: var(--button-success-color);
    --button-hover-bg: var(--button-success-hover-bg);
    --button-hover-border-color: var(--button-success-hover-border-color);
    --button-hover-color: var(--button-success-hover-color);
    --button-active-bg: var(--button-success-active-bg);
    --button-active-border-color: var(--button-success-active-border-color);
    --button-active-color: var(--button-success-active-color);
    --button-disabled-bg: var(--button-success-disabled-bg);
    --button-disabled-border-color: var(--button-success-disabled-border-color);
    --button-disabled-color: var(--button-success-disabled-color);
    --button-focus-ring-color: var(--button-success-focus-ring-color);
}


/**
 * Modifier: Extra small button
 */

.button[data-size=xs] {
    --button-font-size: #{deep-map-get($font-size, 'sm', 'font-size')};
    --button-height: 32px;
    --button-line-height: #{deep-map-get($font-size, 'sm', 'line-height')};
    --button-padding-x: var(--space-3);
    --button-padding-y: var(--space-3);
}


/**
 * Modifier: Small button
 */

.button[data-size=sm] {
    --button-font-size: #{deep-map-get($font-size, 'sm', 'font-size')};
    --button-height: 36px;
    --button-line-height: #{deep-map-get($font-size, 'sm', 'line-height')};
    --button-padding-x: .875rem;
    --button-padding-y: var(--space-2);
}


/**
 * Modifier: Large button
 */

.button[data-size=lg] {
    --button-font-size: #{deep-map-get($font-size, 'md', 'font-size')};
    --button-height: 44px;
    --button-line-height: #{deep-map-get($font-size, 'md', 'line-height')};
    --button-padding-x: 1.125rem;
    --button-padding-y: .625rem;
}


/**
 * Modifier: Extra large button
 */

.button[data-size=xl] {
    --button-font-size: #{deep-map-get($font-size, 'md', 'font-size')};
    --button-height: 48px;
    --button-line-height: #{deep-map-get($font-size, 'md', 'line-height')};
    --button-padding-x: var(--space-5);
    --button-padding-y: var(--space-3);
}


/**
 * Icon only
 */

.button[data-icon-only=true] {
    --button-padding-x: var(--button-padding-y);
    width: var(--button-height);
}


/**
 * Outline
 */

.button[data-outline=true] {    
    --button-bg: transparent;
    --button-color: var(--button-border-color);
}