/**
 * @author: Yoann Le Crom <yoann.lecrom@abstractive.fr>
 * date:    2020-02-27 11:05:16
 */

.Tabs {
}

.Tabs-nav {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 2px solid #aaa;
}

.Tabs-nav-item {
    position: relative;
    text-align: center;
    text-decoration: none;
    padding: .5rem .9rem;
    margin-top: 2px;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    color: #000;
    transition: color .5s ease, border-bottom-color .5s ease;
}
.Tabs-nav-item:hover {
    text-decoration: none;
    color: #000;
}
.Tabs-nav-item:hover::after {
    content: '';

}
.Tabs-nav-item.open {
    background: #aaa;
}

.Tabs-contents {
    position: relative;
    transition: height 1s ease;
}

.Tabs-content {
    position: absolute;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease, visibility 1s ease;
}

.Tabs-content.open {
    visibility: visible;
    opacity: 1;
}

.Tabs-nav--big {
    font-size: 1.3em;
}
.Tabs-nav--big .Tabs-nav-item {
    border-bottom-width: 3px;
}

@media (min-width: 480px) {
    .Tabs-nav-item {
        padding: .5rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .Tabs-nav-item {
        padding: 1rem 2rem;
    }
}