toggle-corp/react-store

.scroll-tabs {
    display: flex;
    justify-content: center;
    background-color: var(--color-foreground);

    .left-button {
        display: none;
        align-self: center;
        flex-shrink: 0;
        padding: var(--spacing-small-alt);
    }

    .right-button {
        display: none;
        align-self: center;
        flex-shrink: 0;
        padding: var(--spacing-small-alt);
    }

    .tabs-container {
        display: flex;
        flex-grow: 1;
        overflow-x: auto;

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

        .tab {
            flex-shrink: 0;
            outline: 0;
            border: 0;
            background-color: transparent;
            cursor: pointer;
            padding: var(--spacing-small-alt) var(--spacing-medium);
            text-transform: uppercase;
            color: var(--color-text-label);
            font-family: inherit;
            font-size: inherit;
            user-select: none;

            &:hover {
                background-color: var(--color-background-hover);
                color: var(--color-navbar-menu-item-hover);
            }

            &.disabled-link {
                cursor: not-allowed;

                &:hover {
                    background-color: var(--color-background-hover);
                    color: var(--color-text-disabled);
                }
            }
        }

        .basic-tab {
            flex-shrink: 0;
            cursor: pointer;
            padding: 0;
        }

        .non-blank {
            display: flex;
            align-items: center;
            align-self: stretch;
        }

        .blank {
            display: flex;
            align-items: center;
            align-self: stretch;
            flex-grow: 1;
            justify-content: flex-end;
        }
    }

    &:not(.inverted) {
        .tabs-container {
            .tab, .basic-tab {
                border-bottom: var(--width-separator-medium) solid var(--color-separator);

                &.active {
                    border-bottom-color: var(--color-accent);
                    background-color: var(--color-background-accent-hint);
                    color: var(--color-text-accent-hint);
                }
            }


            .blank, .non-blank {
                border-bottom: var(--width-separator-medium) solid var(--color-separator);
            }
        }
    }

    &.inverted {
        .tabs-container {
            .tab, .basic-tab {
                border-top: var(--width-separator-medium) solid var(--color-separator);

                &.active {
                    border-top-color: var(--color-accent);
                    background-color: var(--color-background-accent-hint);
                    color: var(--color-text-accent-hint);
                }
            }

            .blank, .non-blank {
                border-top: var(--width-separator-medium) solid var(--color-separator);
            }
        }
    }

    &.scroll {
        .left-button {
            display: initial;
        }

        .right-button {
            display: initial;
        }
    }
}