@use "../global";

button, .button {
    --current-bg: var(--input-bg);

    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    outline: 0;
    padding: 0 var(--button-padding-side);
    background-color: var(--button-bg);
    font-size: var(--button-fontsize);
    font-weight: var(--button-fontweight);
    font-family: var(--input-fontfamily, var(--font-family));
    color: var(--button-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    min-width: var(--button-height);
    line-height: calc(var(--button-height) - calc(var(--button-border-width) * 2));
    margin: 0 var(--button-margin-right) 0 var(--button-margin-left);
    transition: var(--transition);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}

button.w-12 + button.w-12,
button.w-12 + .button.w-12,
.button.w-12 + button.w-12,
.button.w-12 + .button.w-12 {
    margin-top: var(--size-s);
}

/* Variations */
    button[class*="bg-"],
    .button[class*="bg-"] {
        --button-color: var(--color-contrast-primary);
        --button-bg: var(--current-bg);
    }
    button.-outline,
    .button.-outline {
        --button-border-width: 0.1rem;
        --button-bg: transparent;
        --button-border-color: var(--current-bg);
        background-color: transparent;
    }
    button.-outline-color,
    .button.-outline-color {
        --button-border-width: 0.1rem;
        --button-border-color: currentColor;
    }
    button.-ghost,
    .button.-ghost {
        --button-bg: transparent;
        background-color: transparent;
        --button-border-width: 0;
        --input-border-width: 0;
    }

    button[loading],
    .button[loading] {
        --button-color: transparent !important;
        position: relative;
        pointer-events: none;
    }

    button[loading]::after,
    .button[loading]::after {
        content: '';
        position: absolute;
        top: calc(50% - 0.8rem);
        left: calc(50% - 0.8rem);
        animation: rotate 0.5s infinite linear;
        border: 0.2rem solid var(--color-contrast-primary);
        border-right-color: transparent;
        border-top-color: transparent;
        border-radius: 50%;
        display: block;
        height: 1.6rem;
        width: 1.6rem;
    }

    button:hover,
    .button:hover {
        background-color: var(--color-hover);
        --button-color: var(--color-hover-primary);
    }

    button:focus,
    .button:focus {
        border-color: var(--color-accent-1);
        outline: none;
    }
    .button.-ghost:focus, button.-ghost:focus {
        background-color: var(--color-hover);
    }

/* Sizes */
    button.-s,
    .button.-s {
        --button-fontsize: var(--size-6);
        --button-height: var(--input-height-s);
        --button-padding-side: var(--size);
    }

    button.-xs,
    .button.-xs {
        --button-fontsize: var(--size-7);
        --button-height: var(--input-height-xs);
        --button-padding-side: var(--size-m);
    }

    button.-l,
    .button.-l {
        --button-height: var(--input-height-l);
    }

    @mixin sizevariant ($name: null) {
        button.#{$name}\:-s,
        .button.#{$name}\:-s {
            --button-fontsize: var(--size-6);
            --button-height: var(--input-height-s);
            --button-padding-side: var(--size);
        }

        button.#{$name}\:-xs,
        .button.#{$name}\:-xs {
            --button-fontsize: var(--size-7);
            --button-height: var(--input-height-xs);
            --button-padding-side: var(--size-m);
        }

        button.#{$name}\:-l,
        .button.#{$name}\:-l {
            --button-height: var(--input-height-l);
        }
    }

    @each $bpname, $bpsize in global.$breakpoints {
        @media #{$bpsize} {
            @include sizevariant($bpname);
        }
    }

/* Icons */
    /* icon right of text */
    button > icon,
    .button > icon {
        margin-left: var(--button-icon-margin-textside);
        margin-right: var(--button-icon-margin-outside);
    }

    /* icon left of text */
    button.-icon-left > icon:not(.icon-right),
    .button.-icon-left > icon:not(.icon-right) {
        order: -1;
        margin-left: var(--button-icon-margin-outside);
        margin-right: var(--button-icon-margin-textside);
    }

    /* icon only */
    button.-icon,
    .button.-icon {
        --button-padding-side: 0;
        --button-icon-margin-outside: 0;
        --button-icon-margin-textside: 0;
        width: var(--button-height);
        text-align: center;
    }

    @mixin iconvariant ($name: null) {
        button.#{$name}\:-icon,
        .button.#{$name}\:-icon {
            --button-fontsize: 0;
            --button-padding-side: 0;
            --button-icon-margin-outside: 0;
            --button-icon-margin-textside: 0;
            width: var(--button-height);
            text-align: center;
        }
    }

    @each $bpname, $bpsize in global.$breakpoints {
        @media #{$bpsize} {
            @include iconvariant($bpname);
        }
    }

    .-dot {
        position: relative;
    }
        .-dot[dot]::after {
            --dot-size: 0.6rem;
            --dot-margin: 0.8rem;
            content: '';
            position: absolute;
            width: var(--dot-size);
            height: var(--dot-size);
            top: var(--dot-margin);
            right: var(--dot-margin);
            background: var(--color-danger);
            border-radius: 50%;
        }
        .-s.-dot[dot]::after {
            right: 0.2rem;
        }