toggle-corp/react-store

.fixed-tabs {
    display: flex;
    background-color: var(--color-foreground);
    overflow: hidden;

    .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;

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

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

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

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

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

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

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

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

}