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

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

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

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

$text-size-caption: 36px;
$text-size-count: 24px;

.root {
    @include link-button-horizontal-layout(36px);
    @include tab-button-color(var(--uui-tab-button-text), var(--uui-tab-button-text-active), transparent);
    cursor: pointer;
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
    bottom: -1px;
    display: flex;
    align-items: center;
    font-family: var(--uui-tab-button-font);
    font-weight: var(--uui-tab-button-font-weight, normal);
    border-bottom: 3px solid transparent;

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

    &.uui-notification {
        &::after {
            content: '';
            margin-bottom: math.div($text-size-caption, 2);
            height: 6px;
            width: 6px;
            background: var(--uui-negative);
            box-shadow: 0 1px 8px 0 var(--uui-negative);
            border-radius: 50%;
        }
    }

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

    :global(.uui-count) {
        @include text-size($text-size-count, 0);
        letter-spacing: 0;
        color: var(--uui-informer-caption);
        background-color: var(--uui-informer-bg);
        padding: 0 6px;
        margin-left: 6px;
        margin-right: 3px;
        border-radius: 9px;
        flex-shrink: 0;
    }

    :global(.uui-caption) {
        @include text-size($text-size-caption, 0);
    }

    // Sizes
    &.size-36 {
        height: 36px;
    }

    &.size-48 {
        height: 48px;
    }

    &.size-60 {
        height: 60px;
    }
}
