@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$button-spacer: h.useVar("control-spacer") !default;
$button-height: h.useVar("control-height") !default;
$button-padding: h.useVar("control-padding-vertical")
    h.useVar("control-padding-horizontal") !default;
$button-loading-animation-duration: h.useVar("animation-speed-slow") !default;
$button-disabled-opacity: h.useVar("control-disabled-opacity") !default;

$button-color: h.useVar("font-color") !default;
$button-font-size: h.useVar("font-size") !default;
$button-font-weight: h.useVar("font-weight") !default;
$button-line-height: h.useVar("line-height") !default;

$button-box-shadow: none !default;
$button-border-width: h.useVar("control-border-width") !default;
$button-border-style: solid !default;
$button-border-color: h.useVar("control-border-color") !default;
$button-border-radius: h.useVar("border-radius") !default;
$button-background-color: h.useVar("control-background-color") !default;

$button-hover-color: $button-color;
$button-hover-background-color: $button-background-color;
$button-hover-border-color: h.useVar("grey-light");

$button-outlined-background-color: transparent !default;
$button-outlined-border-color: h.useVar("grey-light") !default;
/* @docs */

.o-button {
    @include h.defineVar("button-spacer", $button-spacer);
    @include h.defineVar("button-height", $button-height);
    @include h.defineVar("button-padding", $button-padding);
    @include h.defineVar(
        "button-loading-animation-duration",
        $button-loading-animation-duration
    );
    @include h.defineVar("button-disabled-opacity", $button-disabled-opacity);

    @include h.defineVar("button-color", $button-color);
    @include h.defineVar("button-font-size", $button-font-size);
    @include h.defineVar("button-font-weight", $button-font-weight);
    @include h.defineVar("button-line-height", $button-line-height);

    @include h.defineVar("button-box-shadow", $button-box-shadow);
    @include h.defineVar("button-background-color", $button-background-color);
    @include h.defineVar("button-border-width", $button-border-width);
    @include h.defineVar("button-border-style", $button-border-style);
    @include h.defineVar("button-border-color", $button-border-color);
    @include h.defineVar("button-border-radius", $button-border-radius);
    @include h.defineVar("button-hover-color", $button-hover-color);
    @include h.defineVar(
        "button-hover-border-color",
        $button-hover-border-color
    );
    @include h.defineVar(
        "button-hover-background-color",
        $button-hover-background-color
    );
    @include h.defineVar(
        "button-outlined-background-color",
        $button-outlined-background-color
    );
    @include h.defineVar(
        "button-outlined-border-color",
        $button-outlined-border-color
    );

    // define focus shadow effect
    @include h.focusable;

    // add clickable cursor
    @include h.clickable;

    // remove default appearance
    @include h.removeAppearance;
    text-decoration: none;

    position: relative;
    display: inline-flex;
    text-align: center;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    padding: unset;

    height: h.useVar("button-height");

    color: h.useVar("button-color");
    font-size: h.useVar("button-font-size");
    font-weight: h.useVar("button-font-weight");
    line-height: h.useVar("button-line-height");

    box-shadow: h.useVar("button-box-shadow");
    background-color: h.useVar("button-background-color");

    border-color: h.useVar("button-border-color");
    border-style: h.useVar("button-border-style");
    border-width: h.useVar("button-border-width");
    border-radius: h.useVar("button-border-radius");

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar("button-font-size", h.useVar("size-#{$name}"));
        }
    }

    // color variants
    @each $name, $pair in vars.$colors {
        &--#{$name} {
            @include h.defineVar("button-color", h.useVar("#{$name}-invert"));
            @include h.defineVar("button-background-color", h.useVar($name));
            @include h.defineVar(
                "button-border-color",
                h.useVar("#{$name}-darker")
            );
            @include h.defineVar(
                "button-hover-color",
                h.useVar("#{$name}-invert")
            );
            @include h.defineVar(
                "button-hover-background-color",
                h.useVar("#{$name}")
            );
            @include h.defineVar(
                "button-hover-border-color",
                h.useVar("#{$name}")
            );

            &.o-button--outlined {
                @include h.defineVar("button-color", h.useVar("#{$name}"));
                @include h.defineVar(
                    "button-background-color",
                    h.useVar("button-outlined-background-color")
                );
                @include h.defineVar(
                    "button-border-color",
                    h.useVar("#{$name}")
                );
                @include h.defineVar(
                    "button-hover-background-color",
                    h.useVar("#{$name}")
                );
                @include h.defineVar(
                    "button-hover-border-color",
                    h.useVar("#{$name}")
                );
                @include h.defineVar(
                    "button-hover-color",
                    h.useVar("#{$name}-invert")
                );
            }

            &.o-button--inverted {
                @include h.defineVar(
                    "button-background-color",
                    h.useVar("#{$name}-invert")
                );
                @include h.defineVar(
                    "button-border-color",
                    h.useVar("#{$name}-invert")
                );
                @include h.defineVar("button-color", h.useVar($name));
                @include h.defineVar(
                    "button-hover-background-color",
                    h.useVar("#{$name}-invert")
                );
                @include h.defineVar(
                    "button-hover-border-color",
                    h.useVar("#{$name}-invert")
                );
                @include h.defineVar("button-hover-color", h.useVar($name));
            }
        }
    }

    &:focus,
    &:hover {
        color: h.useVar("button-hover-color");
        background-color: h.useVar("button-hover-background-color");
        border-color: h.useVar("button-hover-border-color");

        // darken color on hover
        filter: brightness(95%);
    }

    &__wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        padding: h.useVar("button-padding");
    }

    &__label {
        width: 100%;
    }

    &--expanded {
        width: 100%;
    }

    &--rounded {
        @include h.defineVar(
            "button-border-radius",
            h.useVar("border-radius-rounded")
        );
    }

    &--disabled {
        @include h.disabled(h.useVar("button-disabled-opacity"));
    }

    &--outlined {
        @include h.defineVar(
            "button-background-color",
            h.useVar("button-outlined-background-color")
        );
        @include h.defineVar(
            "button-border-color",
            h.useVar("button-outlined-border-color")
        );
        @include h.defineVar(
            "button-hover-background-color",
            $button-background-color
        );
    }

    &--inverted {
        @include h.defineVar(
            "button-background-color",
            h.useVar("button-color")
        );
        @include h.defineVar("button-border-color", h.useVar("button-color"));
        @include h.defineVar("button-color", h.useVar("button-border-color"));
        @include h.defineVar(
            "button-hover-background-color",
            h.useVar("button-color")
        );
        @include h.defineVar(
            "button-hover-color",
            h.useVar("button-border-color")
        );
    }

    &--loading {
        color: transparent !important;
        pointer-events: none;

        &::after {
            -webkit-animation: h.useVar("button-loading-animation-speed");
            animation-name: spinAround;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: h.useVar("button-loading-animation-duration");

            position: absolute !important;
            left: calc(50% - 0.5em);
            top: calc(50% - 0.5em);

            display: block;
            height: 1em;
            width: 1em;

            content: "";

            border: 2px solid h.useVar("button-color");
            border-radius: 9999px;
            border-right-color: transparent;
            border-top-color: transparent;
        }
    }

    .o-icon:not(:last-child) {
        margin-right: h.useVar("button-spacer");
    }

    .o-icon:last-child:not(:first-child) {
        margin-left: h.useVar("button-spacer");
    }

    &:has(.o-tag--badge) {
        position: relative;
    }
}