.tabs {
    width: 100%;
    max-width: 100%;

    .tabs__navigator {
        display: none;
        width: 2rem;
        height: 100%;
        cursor: pointer;
        top: 0;
        font-size: 10px;
        background: rgba(255,255,255,0.5);
        position: absolute;
        align-items: center;
        border-bottom: 1px solid var(--light-gray);

        svg {
            width: 8px;
            fill: var(--dark-gray);
            opacity: 0.5;
            transition: opacity .3s ease;
        }

        &:hover {
            svg {
                opacity: 1;
            }
        }

        &:first-of-type {
            left: 0;
            justify-content: start;
        }

        &:last-of-type {
            right: 0;
            justify-content: end;
        }
    }

    &.tabs--scrollable {
        position: relative;
        display: flex;
        align-items: center;

        .tabs__container {
            max-width: calc(100% - 4rem);
            margin: 0 auto;
            padding: 0 1rem;
        }

        .tabs__navigator {
            display: flex;
        }
    }
}

.tabs__container {
    scrollbar-width: none;
    overflow-x: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--light-gray);

    &::-webkit-scrollbar {
        display: none;
    }

    &:not(&.dragging) {
        scroll-snap-type: x mandatory;
    }

    &.dragging {
        cursor: grabbing;
    }
}

.tabs__wrapper {
    width: max-content;
    padding-bottom: 2px;
    flex-wrap: nowrap;
}

.tabs__item {
    min-width: fit-content;
    margin: 0 1.5rem -2px 0;
    scroll-snap-align: end;
}

.tabs__item.active {
    color: var(--dark-gray);
    border-bottom: 2px solid var(--dark-gray);
}


@media screen and (min-width:1200px) {
    .tabs__navigator {
        width: 2.5rem;
    }

    &.tabs--scrollable {

        .tabs__container {
            max-width: calc(100% - 5rem);
        }
    }
}