@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --button-border-radius: 4px;
    --button-font-size: 14px;

    --button-background: #ebebeb;
    --button-background-hover: hsl(from var(--button-background) h s calc(l - 10));
    --button-color: #191919;
    --button-disabled-opacity: .65;
}

.dark-side {
    --button-background: #2b2d30;
    --button-color: #f3fcff;
    --button-disabled-opacity: .25;
}

button,
.button {
    --control-height: var(--control-height-normal);
    --pill-button-radius: calc(var(--control-height) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    padding: 0 var(--button-font-size);
    font-size: var(--button-font-size);
    height: var(--control-height);
    background-color: var(--button-background);
    color: var(--button-color);
    border: 1px solid var(--button-background);
    cursor: pointer;
    outline: none;
    position: relative;
    overflow: visible;
    border-radius: var(--button-border-radius);
    gap: 8px;
    transition: all .2s linear;

    &:first-child {
        margin-left: 0;
    }
    &:last-child {
        margin-right: 0;
    }

    &.disabled, &:disabled {
        pointer-events: none;
        opacity: var(--button-disabled-opacity);
    }

    .icon {
        height: calc((var(--control-height)/2));
        font-size: calc(var(--button-font-size) * 1.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &.pill-button {
        border-radius: var(--pill-button-radius);
    }

    &:active, &.focus, &:focus {
        text-decoration: none;
    }
    
    @media (hover: hover) {
        &:hover {
            background-color: hsl(from var(--button-background) h s calc(l - 10));
        }
    }
    
    @media (hover: none) {
        &:active {
            background-color: hsl(from var(--button-background) h s calc(l - 10));
        }
    }

    &.square, &.cycle {
        width: var(--control-height);
        height: var(--control-height);
        padding: 0!important;

        flex-shrink: 0!important;
        flex-grow: 0!important;
    }

    &.cycle {
        border-radius: 50%;
    }

    &.square, &.cycle {
        &.dropdown-toggle {
            &::before {
                display: none;
            }
        }
    }

    &.dropdown-toggle.no-marker {
        padding-right: .75rem!important;
    }

    .dropdown-caret {
        fill: var(--button-color);
    }
    
    &.outline {
        background: transparent none;
        border-width: 1px;
        border-color: var(--button-background);
        color: #191919;
        
        @media (hover: hover) {
            &:hover {
                background-color: var(--button-background);
                color: var(--button-color);
            }
        }
        
        @media (hover: none) {
            &:active {
                background-color: var(--button-background);
                color: var(--button-color);
            }
        }
    }
}

a.button {
    appearance: none;
    color: var(--button-color);
    box-shadow: none;
    text-decoration: none;
}

button, .button, input[type=button], input[type=submit], input[type=reset] {
    &.mini {
        --control-height: var(--control-height-mini);
        --button-font-size: 10px;
    }
    &.small {
        --control-height: var(--control-height-small);
        --button-font-size: 12px;
    }
    &.medium {
        --control-height: var(--control-height-medium);
        --button-font-size: 14px;
    }
    &.large {
        --control-height: var(--control-height-large);
        --button-font-size: 16px;
    }
    &.largest {
        --control-height: var(--control-height-largest);
        --button-font-size: 18px;
    }
}

button,
.button {
    .loader {
        transform: scale(0);
        opacity: 0;
        transition: @transition-short;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .loader + .caption {
        transition: @transition-short;
        margin-left: -16px;
    }
    &.loading {
        transition: @transition-short;
        .loader {
            transform: scale(1);
            opacity: 1;
        }
        .caption {
            margin-left: .3rem;
        }
    }
}

button, .button {
    &.link {
        --button-color: #191919;
        background-color: transparent;
        border: none;

        &:hover {
            background-color: transparent;
            text-decoration: underline;
        }

        &.focus, &:focus {
            box-shadow: none;
        }
    }
}

button.flat, .button.flat {
    --button-color: #191919;
    background-color: transparent;
    border-color: transparent;
    
    @media (hover: hover) {
        &:hover {
            background-color: var(--button-background);
            color: var(--button-color);
        }
    }
    
    @media (hover: none) {
        &:active {
            background-color: var(--button-background);
            color: var(--button-color);
        }
    }
}

each(@normalColors, {
    @light-color: "light-@{value}";
    @minor-color: "minor-@{value}";
    @sat-color: "sat-@{value}";
    @dark-color: "dark-@{value}";
    
    .button-@{value} {
        --button-background: @@value;
        --button-color: #fff;

        &.link {
            --button-color: @@value!important;
        }
        
        @media (hover: hover) {
            &:hover {
                --button-background: @@value;
                --button-color: #fff;
            }
        }
        
        @media (hover: none) {
            &:active {
                --button-background: @@value;
                --button-color: #fff;
            }
        }
    }

    .button-light-@{value} {
        --button-background: @@light-color;
        --button-color: #191919;

        &.link {
            --button-color: @@light-color!important;
        }

        @media (hover: hover) {
            &:hover {
                --button-background: @@light-color;
                --button-color: #191919;
            }
        }
        
        @media (hover: none) {
            &:active {
                --button-background: @@light-color;
                --button-color: #191919;
            }
        }
    }

    .button-minor-@{value} {
        --button-background: @@minor-color;
        --button-color: #fff;

        &.link {
            --button-color: @@minor-color!important;
        }

        @media (hover: hover) {
            &:hover {
                --button-background: @@minor-color;
                --button-color: #fff;
            }
        }
        
        @media (hover: none) {
            &:active {
                --button-background: @@minor-color;
                --button-color: #fff;
            }
        }
    }

    .button-sat-@{value} {
        --button-background: @@sat-color;
        --button-color: #fff;

        &.link {
            --button-color: @@sat-color!important;
        }

        @media (hover: hover) {
            &:hover {
                --button-background: @@sat-color;
                --button-color: #fff;
            }
        }
        
        @media (hover: none) {
            &:active {
                --button-background: @@sat-color;
                --button-color: #fff;
            }
        }
    }

    .button-dark-@{value} {
        --button-background: @@dark-color;
        --button-color: #fff;

        &.link {
            --button-color: @@dark-color!important;
        }

        @media (hover: hover) {
            &:hover {
                --button-background: @@dark-color;
                --button-color: #fff;
            }
        }
        
        @media (hover: none) {
            &:active {
                --button-background: @@dark-color;
                --button-color: #fff;
            }
        }
    }

})

.button-seashell, .button-champagne, .button-yellow, .button-lime {
    color: #191919!important;
}

button, .button {
    &.shadow { box-shadow: 6px 6px 0 var(--shadow-color-3d); }
    &.shadow:active { transform: translate(4px, 4px); }
    
    &.largest {
        &.shadow { box-shadow: 8px 8px 0 var(--shadow-color-3d); }
        &.shadow:active { transform: translate(6px, 6px); }
    }
    
    &.large {
        &.shadow { box-shadow: 8px 8px 0 var(--shadow-color-3d); }
        &.shadow:active { transform: translate(6px, 6px); }
    }
    
    &.small {
        &.shadow { box-shadow: 4px 4px 0 var(--shadow-color-3d); }
        &.shadow:active { transform: translate(2px, 2px); }
    }
    
    &.mini {
        &.shadow { box-shadow: 2px 2px 0 var(--shadow-color-3d); }
        &.shadow:active { transform: translate(1px, 1px); }
    }
    
    &.shadow:active {
        box-shadow: none;
    }
}

button, .button {
    &.shift { &:active {transform: translate(2px, 2px);} }
    &.large.shift { &:active {transform: translate(4px, 4px);} }
    &.largest.shift { &:active {transform: translate(4px, 4px);} }
    &.small.shift { &:active {transform: translate(2px, 2px);} }
    &.mini.shift { &:active {transform: translate(1px, 1px);} }
}

button, .button {
    .badge {
        border-radius: 4px;
        border: 1px solid var(--border-color);
        padding: 2px!important;
    }
    &:has(.badge.corner) {
        padding-right: 1.5rem;
    }
}

each(@media-rules, {
    @container (min-width: @value) {
        button,
        .button {
            &.largest-@{key} {
                --button-pill-radius: 27px;
                --button-size: 54px;
                --button-font-size: 18px;
            }
            &.large-@{key} {
                --button-pill-radius: 20px;
                --button-size: 40px;
                --button-font-size: 16px;
            }
            &.small-@{key} {
                --button-pill-radius: 13px;
                --button-size: 26px;
                --button-font-size: 12px;
            }
            &.mini-@{key} {
                --button-pill-radius: 10px;
                --button-size: 20px;
                --button-font-size: 10px;
            }
        }
    }
})

button, .button {
    &.glow {
        box-shadow: 0 0 10px hsl(from var(--button-background) h s calc(l + 5));
    }
    
    &.glow-hover {
        @media (hover: hover) {
            &:hover {
                box-shadow: 0 0 10px hsl(from var(--button-background) h s calc(l + 5));
            }
        }
        @media (hover: none) {
            &:active {
                box-shadow: 0 0 10px hsl(from var(--button-background) h s calc(l + 5));
            }
        }
    }
    
    &.glow-animated {
        --glow-speed: 1s;
        animation: button-glow var(--glow-speed) ease-in-out infinite alternate;
        box-shadow: 0 0 10px hsl(from var(--button-background) h s calc(l + 5));
    }

    &.glow-animated-hover {
        --glow-speed: 1s;
        @media (hover: hover) {
            &:hover {
                animation: button-glow var(--glow-speed) ease-in-out infinite alternate;
                box-shadow: 0 0 10px hsl(from var(--button-background) h s calc(l + 5));
            }
        }
        @media (hover: none) {
            &:active {
                animation: button-glow var(--glow-speed) ease-in-out infinite alternate;
                box-shadow: 0 0 10px hsl(from var(--button-background) h s calc(l + 5));
            }
        }
    }
    
    @keyframes button-glow {
        from {
            box-shadow: 0 0 5px hsl(from var(--button-background) h s calc(l + 5));
        }
        to {
            box-shadow: 0 0 20px hsl(from var(--button-background) h s calc(l + 5));
        }
    }
}