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

/* @docs */
$tabs-sapcer: h.useVar("control-spacer");
$tabs-disabled-opacity: h.useVar("control-disabled-opacity") !default;

$tabs-tab-padding: h.useVar("control-spacer")
    calc(2 * h.useVar("control-spacer")) !default;
$tabs-tab-icon-margin: 0 h.useVar("control-spacer") 0 0 !default;

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

$tabs-tab-border-width: h.useVar("control-border-width") !default;
$tabs-tab-border-style: solid !default;
$tabs-tab-border-color: h.useVar("control-border-color") !default;
$tabs-tab-border-radius: h.useVar("border-radius") !default;
$tabs-tab-background-color: transparent !default;

$tabs-tab-hover-color: $tabs-tab-color !default;
$tabs-tab-hover-background-color: hsl(0, 0%, 96%) !default;
$tabs-tab-hover-border-color: hsl(0, 0%, 86%) !default;
$tabs-tab-hover-border-radius: $tabs-tab-border-radius !default;

$tabs-tab-active-color: h.useVar("primary") !default;
$tabs-tab-active-background-color: h.useVar("primary-invert") !default;
$tabs-tab-active-border-color: h.useVar("primary") !default;
$tabs-tab-active-border-radius: $tabs-tab-border-radius !default;

$tabs-content-padding: calc(2 * h.useVar("control-spacer")) !default;
/* @docs */

.o-tabs {
    @include h.defineVar("tabs-sapcer", $tabs-sapcer);
    @include h.defineVar("tabs-disabled-opacity", $tabs-disabled-opacity);
    @include h.defineVar("tabs-tab-padding", $tabs-tab-padding);
    @include h.defineVar("tabs-tab-icon-margin", $tabs-tab-icon-margin);

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

    @include h.defineVar(
        "tabs-tab-background-color",
        $tabs-tab-background-color
    );
    @include h.defineVar("tabs-tab-border-width", $tabs-tab-border-width);
    @include h.defineVar("tabs-tab-border-style", $tabs-tab-border-style);
    @include h.defineVar("tabs-tab-border-color", $tabs-tab-border-color);
    @include h.defineVar("tabs-tab-border-radius", $tabs-tab-border-radius);

    @include h.defineVar("tabs-tab-active-color", $tabs-tab-active-color);
    @include h.defineVar(
        "tabs-tab-active-background-color",
        $tabs-tab-active-background-color
    );
    @include h.defineVar(
        "tabs-tab-active-border-color",
        $tabs-tab-active-border-color
    );
    @include h.defineVar(
        "tabs-tab-active-border-radius",
        $tabs-tab-active-border-radius
    );

    @include h.defineVar("tabs-tab-hover-color", $tabs-tab-hover-color);
    @include h.defineVar(
        "tabs-tab-hover-background-color",
        $tabs-tab-hover-background-color
    );
    @include h.defineVar(
        "tabs-tab-hover-border-color",
        $tabs-tab-hover-border-color
    );
    @include h.defineVar(
        "tabs-tab-hover-border-radius",
        $tabs-tab-hover-border-radius
    );

    @include h.defineVar("tabs-content-padding", $tabs-content-padding);

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

    &__list {
        display: flex;
        align-items: center;
        flex-grow: 1;
        flex-shrink: 0;

        margin: 0;
        padding: 0;

        transition: background h.useVar("transition-duration")
            h.useVar("transition-timing");
    }

    &--multiline &__list {
        flex-wrap: wrap;
    }

    &--left &__list {
        justify-content: flex-start;
    }

    &--centered &__list {
        justify-content: center;
    }

    &--right &__list {
        justify-content: flex-end;
    }

    &__tab {
        // add clickable cursor
        @include h.clickable;

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

        // remove default appearance
        @include h.removeAppearance;

        display: flex;
        align-items: center;
        justify-content: center;
        vertical-align: top;

        padding: h.useVar("tabs-tab-padding");

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

        background-color: h.useVar("tabs-tab-background-color");
        border-color: h.useVar("tabs-tab-border-color");
        border-style: h.useVar("tabs-tab-border-style");
        border-width: h.useVar("tabs-tab-border-width");
        border-radius: h.useVar("tabs-tab-border-radius");

        // focus effect
        &:hover,
        &:focus,
        &:focus-visible,
        &:focus-within {
            @include h.defineVar(
                "tabs-tab-border-radius",
                h.useVar("tabs-tab-hover-border-radius")
            ); // check this

            &:not(.o-tabs__tab--active) {
                @include h.defineVar(
                    "tabs-tab-color",
                    h.useVar("tabs-tab-hover-color")
                );
                @include h.defineVar(
                    "tabs-tab-background-color",
                    h.useVar("tabs-tab-hover-background-color")
                );
                @include h.defineVar(
                    "tabs-tab-border-color",
                    h.useVar("tabs-tab-hover-border-color")
                );
            }
        }

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

        &--active {
            @include h.defineVar(
                "tabs-tab-color",
                h.useVar("tabs-tab-active-color")
            );
            @include h.defineVar(
                "tabs-tab-background-color",
                h.useVar("tabs-tab-active-background-color")
            );
            @include h.defineVar(
                "tabs-tab-border-color",
                h.useVar("tabs-tab-active-border-color")
            );
            @include h.defineVar(
                "tabs-tab-border-radius",
                h.useVar("tabs-tab-active-border-radius")
            );
        }

        &-icon {
            margin: h.useVar("tabs-tab-icon-margin");
        }

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

                &:hover,
                &:focus,
                &:focus-visible,
                &:focus-within {
                    color: h.useVar("tabs-tab-hover-color");
                }
            }
        }
    }

    // specific default style styling
    &--default {
        // override border radius
        @include h.defineVar("tabs-tab-border-radius", unset);
        @include h.defineVar("tabs-tab-active-border-radius", unset);

        .o-tabs__tab {
            border-color: transparent;
            border-bottom-color: h.useVar("tabs-tab-border-color");

            // focus effect
            &:hover,
            &:focus,
            &:focus-visible,
            &:focus-within {
                @include h.defineVar(
                    "tabs-tab-background-color",
                    h.useVar("tabs-tab-hover-background-color")
                );
            }
        }
    }

    // specific boxed style styling
    &--tabs,
    &--boxed {
        // override border radius
        $border-radius: h.useVar("border-radius") h.useVar("border-radius") 0 0;

        @include h.defineVar("tabs-tab-border-radius", $border-radius);
        @include h.defineVar("tabs-tab-hover-border-radius", $border-radius);
        @include h.defineVar("tabs-tab-active-border-radius", $border-radius);

        // override border color
        @include h.defineVar(
            "tabs-tab-active-border-color",
            $tabs-tab-border-color
        );

        .o-tabs__tab {
            border-color: transparent;
            border-bottom-color: h.useVar("tabs-tab-border-color");

            &--active {
                border-color: h.useVar("tabs-tab-border-color");
                border-bottom-color: transparent;
            }

            // focus effect
            &:hover,
            &:focus,
            &:focus-visible,
            &:focus-within {
                @include h.defineVar(
                    "tabs-tab-background-color",
                    h.useVar("tabs-tab-hover-background-color")
                );
            }
        }
    }

    // specific toggle style styling
    &--toggle {
        // override border radius
        @include h.defineVar("tabs-tab-border-radius", unset);
        @include h.defineVar(
            "tabs-tab-hover-border-radius",
            h.useVar("border-radius")
        );
        @include h.defineVar("tabs-tab-active-border-radius", unset);

        // redefine active colors
        @include h.defineVar(
            "tabs-tab-active-color",
            $tabs-tab-active-background-color
        );
        @include h.defineVar(
            "tabs-tab-active-background-color",
            $tabs-tab-active-color
        );
        @include h.defineVar(
            "tabs-tab-active-border-color",
            $tabs-tab-active-color
        );
    }

    // specific pills style styling
    &--pills {
        // override border radius
        $border-radius: h.useVar("border-radius");

        @include h.defineVar("tabs-tab-border-radius", $border-radius);
        @include h.defineVar("tabs-tab-hover-border-radius", $border-radius);
        @include h.defineVar("tabs-tab-active-border-radius", $border-radius);

        // redefine active colors
        @include h.defineVar(
            "tabs-tab-active-color",
            $tabs-tab-active-background-color
        );
        @include h.defineVar(
            "tabs-tab-active-background-color",
            $tabs-tab-active-color
        );
        @include h.defineVar(
            "tabs-tab-active-border-color",
            $tabs-tab-active-color
        );

        .o-tabs__tab {
            border-color: transparent;
        }
    }

    &__content {
        position: relative;
        overflow: visible;
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        &--transitioning {
            overflow: hidden;
        }

        &:not(:has(.o-tabs__panel:empty)) {
            padding: h.useVar("tabs-content-padding");
        }
    }

    &:not(:last-child) {
        margin-bottom: h.useVar("tabs-content-padding");
    }

    &--expanded {
        width: 100%;

        .o-tabs__tab {
            flex-grow: 1;
            flex-shrink: 0;
        }
    }

    &--vertical {
        display: flex;

        .o-tabs__list {
            flex-direction: column;
            align-items: stretch;
            flex-grow: 0;
            border-bottom: none;
        }

        &.o-tabs--left {
            flex-direction: row;

            &.o-tabs--boxed {
                // override border radius
                $border-radius: h.useVar("border-radius") 0 0
                    h.useVar("border-radius");

                @include h.defineVar("tabs-tab-border-radius", $border-radius);
                @include h.defineVar(
                    "tabs-tab-hover-border-radius",
                    $border-radius
                );
                @include h.defineVar(
                    "tabs-tab-active-border-radius",
                    $border-radius
                );

                .o-tabs__tab {
                    border-bottom-color: transparent;
                    border-right-color: h.useVar("tabs-tab-border-color");

                    &.o-tabs__tab--active {
                        border-right-color: transparent;
                        border-bottom-color: h.useVar("tabs-tab-border-color");
                    }
                }
            }
        }

        &.o-tabs--right {
            flex-direction: row-reverse;

            &.o-tabs--boxed {
                // override border radius
                $border-radius: 0 h.useVar("border-radius")
                    h.useVar("border-radius") 0;

                @include h.defineVar("tabs-tab-border-radius", $border-radius);
                @include h.defineVar(
                    "tabs-tab-hover-border-radius",
                    $border-radius
                );
                @include h.defineVar(
                    "tabs-tab-active-border-radius",
                    $border-radius
                );

                .o-tabs__tab {
                    border-bottom-color: transparent;
                    border-right-color: transparent;
                    border-left-color: h.useVar("tabs-tab-border-color");

                    &.o-tabs__tab--active {
                        border-left-color: transparent;
                        border-right-color: h.useVar("tabs-tab-border-color");
                        border-bottom-color: h.useVar("tabs-tab-border-color");
                    }
                }
            }
        }
    }
}