.c-tab-btn {
    position: relative;
    flex: 1 0 0;
    padding: 15px 10px;
    overflow: hidden;
    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: $color--main;
        transition: .2s ease-out;
    }

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

    &.is-active {
        box-shadow: 0px 1px 0px 0px currentColor;
        color: $color--main;

        &:after {
            bottom: 0;
        }
    }

    &:focus {
        box-shadow: 0px 0px 0px 2px $color--main;
        color: $color--main;
    }

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

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