@import '../../base/components/tabs';

.tabs {
    margin: tabs--margin;
    margin-bottom: tabs--margin-bottom;

    &__tab {
        &[aria-current='page'], &--current {
            .tabs__tab__control {
                border-bottom: tabs--tab--current--border-bottom;
                color: tabs--tab--current--color;
            }
        }

        &:hover {
            .tabs__tab__control {
                border-bottom: tabs--tab--hover--border-bottom;
                color: tabs--tab--hover--color;
            }
        }

        &__control {
            border-bottom: tabs--tab--border-bottom;
            font-size: tabs--tab--font-size;
            font-weight: tabs--tab--font-weight;
            margin: tabs--tab--margin;
            padding: tabs--tab--padding;
        }
    }
}

.tabs--vertical {
    padding-right: tabs--vertical--padding-right;
    margin: tabs--vertical--margin;
    border-right: tabs--vertical--border-right;

    .tabs__tab {
        height: tabs--vertical--tab--height;

        &__control {
            margin: 0;
            padding: tabs--vertical--tab--padding;
        }
    }
}