// https://m3.material.io/components/tabs/specs

.sd-tabs {
    width: max-content;
    overflow: hidden;
}

.sd-tab {
    background: var(--md-sys-color-surface);
    display: inline-block;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
    user-select: none;
    cursor: pointer;
    overflow: hidden;

    &-helper {
        padding: 0.5rem 1rem 0.8rem 1rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 4px;
        transition: all 200ms;
        &:hover {
            background: rgb(0 0 0 / 0.04);
        }
        &:active {
            background: rgb(0 0 0 / 0.08);
        }
    }

    &:focus-visible {
        outline: none;
        .sd-tab-helper {
            background: rgb(0 0 0 / 0.06);
        }
    }

    &-icon {
        transition: all 200ms;
        svg {
            height: 20px;
            display: grid;
            place-items: center;
        }
    }
    &-label_text {
        transition: all 200ms;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        -webkit-text-stroke: 0.1px currentColor;
    }
    &[data-sd-active='true'] {
        .sd-tab-icon {
            color: var(--md-sys-color-primary);
        }
        .sd-tab-label_text {
            color: var(--md-sys-color-primary);
        }
    }
    position: relative;
    &-active_indicator {
        position: absolute;
        bottom: -3px;
        height: 6px; // height 6px, we hide 3px, levaing 3px to display
        width: 36px;
        border-radius: 12px;
        background: var(--md-sys-color-primary);
        opacity: 0;
    }
    &[data-sd-active='true'] {
        .sd-tab-active_indicator {
            opacity: 1;
        }
    }
    &:not(:has(.sd-tab-icon)) {
        .sd-tab-active_indicator {
            width: 100%;
            border-radius: 0;
            height: 2px;
            bottom: 0;
        }
    }
}