.c-tabs {
    background-color: #000;
}

.c-tabs--light {
    background-color: transparent;

    .c-tab__text {
        color: color(black);
    }

    .c-tabs__content {
        color: color(black);
    }
}

.c-tab {
    display: inline-block;
    border-bottom: 2px solid #808080;

    &.is-active {
        border-bottom: 2px solid color(brand);
    }

    &:active, &:focus {
        outline: none;
    }
}

.c-tab__text {
    color: color(white);
    padding: 20px;

    &:hover {
        cursor: pointer;
    }

    &:active, &:focus {
        outline: none;
    }
}

.tabs-nav {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.c-tabs__content {
    color: color(white);
    padding-top: 20px;
    padding-bottom: 10px;
}

.c-tab-panel {
    display: none;

    &.is-active {
        display: block;
    }
}