/**
 * @author: Yoann Le Crom <yoann.lecrom@abstractive.fr>
 */

.Tabs {
    position: relative;
    display: flex;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: flex-end;
    flex-wrap: wrap-reverse;
}

.Tabs-item {
    color: var(--body-color-inverse);
    background: var(--secondary-color);
    border-radius: .8rem .8rem 0 0;
    transition: background-color .5s ease;
}
.Tabs-item.active {
    box-shadow: .3rem -.05rem .5rem rgba(0, 0, 0, .5);
    z-index: 1;
}

.Tabs-item-link {
    padding: .5rem 2.5rem;
    color: inherit;
}
.Tabs-item-link:hover {
    text-decoration: none;
}

.Tabs--big {
    font-size: 1.6rem;
}

.Tabs--center {
    justify-content: center;
}

/* When using this, Firefox needs the parent col or row element to also be vertical */
.Tabs--vertical {
    writing-mode: vertical-rl;
    padding: .9rem 0;
}
.Tabs--vertical .Tabs-item {
    border-radius: 0 .8rem .8rem 0;
}
.Tabs--vertical .Tabs-item-link {
    padding: 2.5rem .5rem;
}

.Tabs--vertical .Tabs-item.active {
    box-shadow: .05rem .3rem .5rem rgba(0, 0, 0, .5);
}

.Tabs--autoColors .Tabs-item:nth-child(1) {
    background-color: var(--secondary-color-light);
}
.Tabs--autoColors .Tabs-item:nth-child(2) {
    background-color: var(--secondary-color-alt-light);
}
.Tabs--autoColors .Tabs-item:nth-child(3) {
    background-color: var(--secondary-color-x-light);
}
.Tabs--autoColors .Tabs-item:nth-child(4) {
    background-color: var(--secondary-color-alt-x-light);
}
.Tabs--autoColors .Tabs-item:nth-child(5) {
    background-color: var(--secondary-color-alt);
}
.Tabs--autoColors .Tabs-item:nth-child(6) {
    background-color: var(--secondary-color-dark);
}

.Tabs-item:hover,
.Tabs--autoColors .Tabs-item:hover {
    background: var(--primary-color);
}

@media (max-width: 1400px) {
    .Tabs-item-link {
        padding: .4rem 1.5rem;
    }

    .Tabs--vertical .Tabs-item-link {
        padding: 1.5rem .4rem;
    }

    .Tabs--big {
        font-size: 1.4rem;
    }
}