$tabs-height: 36px;

@mixin tabs() {
    width: 100%;
    height: $tabs-height;

    &__wrapper {
        @include flex();
        @include align-items-center();
        position: relative;
        width: 100%;
        height: $tabs-height;
        background-color: color('tabs', 'background');
        border-top: 1px solid color('tabs', 'border');
        border-bottom: 1px solid color('tabs', 'border');

        &__item {
            width: 100%;
            height: $tabs-height;
            line-height: $tabs-height;
            padding: 0 8px;
            text-align: center;
            @include font("IntervalNextReg");
            font-size: em(14px);
            border-right: 1px solid color('tabs', 'border');

            &:last-child {
                border-right: 0;
            }
        }
    }
}

@mixin nav-tabs() {
    width: 100%;
    height: 40px;
    background: color('background');
    border-bottom: 1px solid color('tabs', 'border');
    @include flex();

    &__wrapper {
        @include flex();
        margin: 0 100px;

        @include breakpoint(medium) {
            margin: 0 10px;
        }
        
        &__item {
            @include flex();
            @include align-items-center();
            @include justify-content-center();
            @include font("IntervalNextReg");
            font-size: em(14px);
            text-transform: uppercase;
            border-bottom: 3px solid transparent;

            &:not(:last-child) {
                margin-right: 64px;
            }

            a {
                display: block;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;

                &:hover {
                    color: color('primary');
                }
            }

            &--active {
                border-bottom-color: color('primary');

                a {
                    color: color('primary');
                }
            }
        }
    }

    @include breakpoint(small) {
        display: none;
    }
}