/*
    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;
    padding: space(20) space(24);
    background-color: rgba(0,0,0,0);
    margin: 0;
    color: $color-text-inactive;
    transition: color $transition-quick;
    opacity: 0.9;

    &:selected {
        color: $color-text;

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

        &:hover {
            cursor: default;
        }
    }

    &:hover {
        cursor: pointer;
        opacity: 1;
    }

    &:focus {
        color: $color-text;
        opacity: 1;
    }
}

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