/*
    Example:
        <tab class="tab">
            <div>Graphics</div>
            <div class="tab__indicator"></div>
        </tab>
*/

.tabs tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.tab {
    @extend %nav-all;
    @extend %header-3;
    display: block;
    position: relative;
    margin: 0;
    padding: space(20) space(24);
    transition: color $transition-quick;
    opacity: 0.9;
    background-color: rgba(0,0,0,0);
    color: $color-text-inactive;

    &:selected {
        color: $color-text;

        .tab__indicator {
            background-color: $color-border-solid;
        }

        &:hover {
            cursor: default;
        }
    }

    .rmlui-window:not([mouse-active]) &:focus {
        animation: $focus-anim-border;

        &:selected .tab__indicator {
            animation: $focus-anim-bg;
        }
    }

    &:focus, &:hover {
        opacity: 1;
        color: $color-text;
        cursor: pointer;
    }
}

.tab__indicator {
    position: absolute;
    right: 0;
    bottom: 2dp;
    left: 0;
    height: 2dp;
    background-color: rgba(0, 0, 0, 0);
}