.tabs {
    position: relative;
}

.tab-nav {
    &__list {
        margin: 0 0 0 -1px;
        padding: 0;
        display: flex;
    }

    &__item {
        list-style-type: none;
        padding: 0;
        background: none;
        margin: 0 0 0 1px;
    }

    &__link {
        display: block;
        text-decoration: none;
        outline: 0;
        padding: 15px 30px;
        background: $gray;
        color: $black;

        &:hover,
        &:active,
        &:hover {
            background: lighten($gray, 10%);
            color: $black;
        }

        &--selected {
            background: $black;
            color: $white;
        }
    }
}

.tab-content {
    padding-top: 1rem;
    display: flex;
}

.tab {
    width: 100%;
    flex: 0 0 100%;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: none;

    &--selected {
        position: relative !important;
        max-width: none;
        max-height: none;
        transition: opacity 0.3s ease-in;
        opacity: 1;
        visibility: visible;
    }
}
