// TABS
// ––––––––––––––––––––––––––––––––––––––––––––––––––

.tab-nav.default {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 1px solid darken($light, 10%);


    .tab-link {
        outline: none;
        border: none;
        display: block;
        padding: 10px 15px 20px 15px;
        cursor: pointer;
        background: white;
        color: $dark;
        position: relative;

        &:hover {
            color: $primary;
        }

        &.active {
            color: $primary;
            background-color: white;

            &:before,
            &:focus:before,
            &:hover:before {
                border-bottom: 11px solid darken($light, 15%);
                border-left: 11px solid transparent;
                border-right: 11px solid transparent;
                content: "";
                display: inline-block;
                position: absolute;
                right: 40%;
                bottom: 0;
                z-index: 1;
            }

            &:after,
            &:focus:after,
            &:hover:after {
                border-bottom: 11px solid #fff;
                border-left: 11px solid transparent;
                border-right: 11px solid transparent;
                content: "";
                display: inline-block;
                position: absolute;
                right: 40%;
                bottom: -1px;
                z-index: 1;

            }

        }
    }
}

.tab-container {
    padding: 15px 0;
}


.tab-content {
    display: none;
    padding: 6px 12px;
    animation: fadeEffect 1s;

    &.active {
        display: block !important;
    }

    .tab-close {
        cursor: pointer;
        opacity: 0.5;
        font-size: 16px;

        &:hover {
            opacity: 1;
        }
    }
}


@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}