@use 'sass:math';
@use  '../../assets/styles/index' as *;

@mixin tab-button-color($color, $activeColor, $backgroundColor) {
    & {
        color: $color;
        fill: $color;
        background-color: $backgroundColor;
    }

    &:hover {
        color: $activeColor;
        fill: $activeColor;
    }

    &:global(.uui-active) {
        color: $activeColor;
        fill: $activeColor;
        border-color: $activeColor;
    }
}

.root {
    --uui-tab_btn-text: var(--uui-text-primary);
    --uui-tab_btn-text-hover: var(--uui-primary-50);
    --uui-tab_btn-text-active: var(--uui-primary-50);
    --uui-tab_btn-text-disabled: var(--uui-text-disabled);

    // fonts
    --uui-tab_btn-font: var(--uui-font);
    --uui-tab_btn-font-weight: var(--uui-font-weight, 600);

    // sizes
    --uui-tab_btn-height: var(--uui-size);
    --uui-tab_btn-min-width: var(--uui-size);
    --uui-tab_btn-padding: var(--uui-horizontal-padding);
    --uui-tab_btn-gap: var(--uui-horizontal-gap);
    --uui-tab_btn-horizontal-caption-padding: var(--uui-horizontal-gap);
    --uui-tab_btn-vertical-caption-padding: calc((var(--uui-tab_btn-height) - var(--uui-tab_btn-line-height)) / 2);
    --uui-tab_btn-icon-height: var(--uui-icon-size);
    --uui-tab_btn-line-height: var(--uui-line-height);
    --uui-tab_btn-font-size: var(--uui-font-size);

    @include clickable-styles();

    & {
        cursor: pointer;
        padding-inline-start: var(--uui-tab_btn-padding);
        padding-inline-end: var(--uui-tab_btn-padding);
        bottom: -1px;
        align-items: center;
        font-family: var(--uui-tab_btn-font);
        font-weight: var(--uui-tab_btn-font-weight);
        border-bottom: var(--uui-tab-line-width) solid transparent;
        height: var(--uui-tab_btn-height);
        min-width: var(--uui-tab_btn-min-width);
        column-gap: var(--uui-tab_btn-gap);
    }

    @include tab-button-color(var(--uui-tab_btn-text), var(--uui-tab_btn-text-active), transparent);

    svg {
        height: var(--uui-tab_btn-icon-height);
        width: inherit;
    }

    &:global(.-clickable):focus-visible {
        @include focus-visible-effect(calc(0px - var(--uui-focus-outline-width)));
    }

    &:global(.uui-disabled) {
        @include tab-button-color(var(--uui-tab_btn-text-disabled), var(--uui-tab_btn-text-disabled), transparent);
    }

    &:global(.uui-button-box) {
        min-width: min-content;
    }

    :global(.uui-caption) {
        display: flex;
        position: relative;
        line-height: var(--uui-tab_btn-line-height);
        font-size: var(--uui-tab_btn-font-size);
        text-wrap: nowrap;
        padding-top: var(--uui-tab_btn-vertical-caption-padding);
        padding-inline-start: var(--uui-tab_btn-horizontal-caption-padding);
        padding-inline-end: var(--uui-tab_btn-horizontal-caption-padding);
        padding-bottom: calc(var(--uui-tab_btn-vertical-caption-padding) - var(--uui-tab-line-width));

        .withNotify {
            position: relative;
            top: calc(0px - var(--uui-notify-size) / 2);
            height: var(--uui-notify-size);
            width: var(--uui-notify-size);
            background: var(--uui-critical-50);
            box-shadow: 0 1px 8px 0 var(--uui-critical-50);
            border-radius: 50%;
        }
    }

    :global(.uui-count_indicator) {
        margin-bottom: calc(var(--uui-tab_btn-vertical-caption-padding) - var(--uui-tab-line-width));
    }

    :global(.uui-icon) {
        margin-bottom: calc(0px - var(--uui-tab-line-width));
    }
}
