.c-tab-bar {
    flexbox();
    align-items: flex-end;

    &__item {
        position: relative;
        flex: 1 0 0;
        padding: 15px 10px;
        overflow: hidden;
        border-bottom: solid 1px currentColor;
        font-size: 16px;
        color: $color--gray-1;
        text-align: left;
        transition: .4s ease-out;

        &:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 5px;
            border-radius: 2px 2px 0 0;
            background-color: currentColor;
            transition: .4s ease-out;
        }

        &:hover:not(.is-active) {
            color: #1b68ff;
            border-bottom-color: $color--gray-1;
        }

        &.is-active {
            color: $color--main;

            &:after {
                bottom: 0;
            }
        }
    }

    &__icon {
        margin-bottom: 10px;
        font-size: 24px;
    }

    &__label {
        display: block;
        text-ellipsis();
    }
}

.c-tab-content {
    padding-top: $vertical--element-lg;
    display: none;
    pointer-events: none;
    transition: .2s ease-out;

    &.is-active {
        display: block;
    }
}