@import 'functions';

.tabs {
    vertical-align: middle;
    margin-bottom: -1px;
    ul, li {
        padding: 0;
        margin: 0;
    }
    ul {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        li {
            -webkit-flex: 1 1 auto;
            flex: 1 1 auto;
            list-style-type: none;
            text-align: center;
            margin-right: 3px;
            a {
                background-color: $tabs-content-bg-color;
                border: 1px solid $tabs-border-color;
                border-bottom: 0;
                font-size: $button-font-med;
                padding: rem-calc(8 16);
                padding-bottom: rem-calc(7);
                margin-top: 3px;
                .tab-label {
                    display: none;
                }
            }
            &:last-child a {
            }
            &.active a, a:hover {
                margin-top: 0;
                border-top: 4px solid $mdc-orange-500;
                background-color: $tabs-content-bg-color;
            }
            &.active a {
                border-bottom: 1px solid $tabs-content-bg-color;
            }
        }
    }
}

@media #{$medium-up} {
    .tabs ul li a .tab-label {
        display: inline;
    }
}

.tabs.vertical {
    margin-right: -1px;
    ul {
        display: block;
        li {
            display: block;
            margin-right: 0;
            margin-top: 0;
            &:first-of-type a {
                margin-top: 0;
            }
            &.active:first-of-type a,
            &:first-of-type a:hover {
                margin-top: 0;
            }
            a {
                margin-left: 3px;
                border: 1px solid $tabs-border-color;
                text-align: left;
                padding-left: 10px;
                padding-right: 2px;
            }
            &.active a,
            a:hover {
                margin-left: 0;
                margin-top: 3px;
                border-top: 1px solid $tabs-border-color;
                border-left: 4px solid $mdc-orange-500;
                border-right-color: transparent;
                background-color: $tabs-content-bg-color;
            }
            i {
                width:15px;
                text-align: center;
                margin-right: 2px;
            }
        }

    }
}
.elevate {
    z-index: 3;
}
.no-horizontal-padding {
    padding-left: 0;
    padding-right: 0;
}
.no-right-padding {
    padding-right: 0;
}
.no-left-padding {
    padding-left: 0;
}
#content-main .content {
    margin-bottom: -1px;
    min-height: 100%;
}
.content .content-inner {
    padding: 0 1.33333rem;
}
.flex {
    @include display-flex();
}
.right-col {
    margin-bottom: -1px;
}