.tabs {
    margin: 1em -1.5em;
    padding: 0 1.5em 2em;

    border-bottom: solid 2px color($gray, lighter);
}

.tabs__menu {
    margin: 1em -1.5em 2em;

    font-size: font-size(s);
    font-weight: font-weight(bold);

    ul {
        @include ul-horizontal;

        display: block;
        padding: 0 0 0 1em;
        vertical-align: top;

        border-bottom: solid 2px color($gray, lighter);
    }

    li {
        margin: 0 .5em;
        vertical-align: bottom;

        background: color($gray, lightest);
        border: solid 2px color($gray, lightest);
        border-bottom: 0;
        border-radius: 2px 3px 0 0;

        a {
            color: color($gray);
        }

        &.ui-tabs-active,
        &.-active {
            bottom: -2px;

            border-color: color($gray, lighter);
            border-bottom: solid 2px $white;
            box-shadow: none;


            a {
                color: color($gray, darker);
                background: $white;

                font-weight: font-weight(extrabold);
            }
        }
    }

    a {
        display: inline-block;
        padding: .5em 1em;

        color: color($gray, dark);
        border-bottom: none;
        outline: none;

        &:hover {
            color: color($gray, darker);
        }
    }
}