/*

In this file:

// A. Variables
// B. Selector Resets
// C. Component

*/

////////////////////////////////////////
// A. Modules
////////////////////////////////////////

@use "sass:math";

//////////////////////////////////////////////
// A. Variables
//////////////////////////////////////////////

:root {
    --button-padding-x: 1.25em;

    --button-padding-y: 0.5em;

    --button-target-size: 2.5em;

    --button-font-family: var(--body-font-family);

    --button-font-weight: var(--font-weight-bold);
    
    --button-text-transform: initial;
    
    --button-letter-spacing: normal;

    --button-border-radius: 0.25em;
    
    --button-outline-border-width: calc( var(--border-width) * 2);

    --button-icon-over-text-width: 4em; 
    
    --button-icon-over-text-border-radius: var(--button-border-radius);
    
    --button-icon-over-text-font-size: 0.675em;
}

//////////////////////////////////////////////
// B. Selector Resets
//////////////////////////////////////////////

@layer base {

    button {
        cursor: pointer;
        
        font-family: inherit;

        &:not([class*="theme-"]) {
            background-color: transparent;
        }

        &:not([class*="border-"]) {
            border: none;
        }
    }

} // end @layer

//////////////////////////////////////////////
// C. Component
//////////////////////////////////////////////

@layer component {

    .button {
        --_button-opacity-hover: 0.75;

        position: relative;

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

        vertical-align: middle;

        line-height: normal;
        
        text-align: center;
        
        cursor: pointer;

        border-radius: var(--button-border-radius);

        transition: opacity 0.5s ease-out;

        &:not([class*="button--icon-only"]) {
            font-family: var(--button-font-family);

            text-transform: var(--button-text-transform);

            letter-spacing: var(--button-letter-spacing);
        }

        &:not(
            [class*="button--outline"],
            [class*="button--icon-over-text"],
            [class*="theme-"],
            [class*="background-color"],
            [data-toggle="dropdown"]
        ) {
            background-color: var(--subtle-fill-1);
        }

        &:hover, 
        &:focus, 
        &:active {
            opacity: var(--_button-opacity-hover);
        }

        &:not([class*="button--icon-only"]):not([class*="button--icon-over-text"]) {
            padding: var(--button-padding-y) var(--button-padding-x);

            font-weight: var(--button-font-weight);
        }

        &:not([class*="button--icon-over-text"]) {        
            min-height: var(--button-target-size);
        }

        &[aria-disabled="true"] {
            opacity: var(--_button-opacity-hover);
            cursor: not-allowed;
        }
    }

    // Outline Modifier

    .button--outline {
        background-color: transparent;
        box-shadow: inset 0 0 0 var(--button-outline-border-width, 2px) currentColor;
    }

    // :has() Selectors

    .button:not([class*="button--icon-over-text"]):has([class*="icon-"]) {
        align-items: center;

        gap: 0.5em;
    }

    .button:has([class*="text"]) {
        &:hover,
        &:focus {
            [class*="text"] {
                text-decoration: underline;
            }
        }
    }

    // Disperse Modifier
   
    .button--disperse {
        justify-content: space-between;
        width: 100%;
    }

    // Button Icon Only Modifier

    .button--icon-only {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;

        container-type: size;

        aspect-ratio: 1;

        [class*="icon-"] {
            --icon-size: 50cqi;
            
            display: flex;
        }
    }
    
    // Button Icon Over Text Modifier

    .button--icon-over-text {
        --font-size-sm: 0.75rem;

        display: flex;
        flex-direction: column;
        
        text-align: center;
        
        gap: 0.375em;

        width: var(--button-icon-over-text-width);

        [class*="__icon"] {
            display: flex;

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

            margin-inline: auto;

            aspect-ratio: 1 / 1;

            min-height: var(--button-target-size);

            border-radius: var(--button-icon-over-text-border-radius);

            &:not([class*="theme-"]) {
                background-color: var(--subtle-fill-1);
            }
        }

        [class*="text"] {
            min-width: 100%;

            font-size: var(--button-icon-over-text-font-size);

            font-weight: var(--font-weight-bold);
        }
    }

} // end @layer