toggle-corp/react-store

@import '../../../stylesheets/button-base';

.vertical-tabs {
    overflow-y: auto;

    .tab {
        @extend %button-base;
        display: block;
        border-bottom: var(--width-separator-thin) solid var(--color-separator);
        padding: var(--spacing-small) var(--spacing-medium);
        width: 100%;
        text-align: left;
        word-break: break-all;
        color: var(--color-text-label);

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

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

    &:not(.inverted) {
        .tab {
            border-left: var(--width-separator-thick) solid transparent;

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

    .inverted {
        .tab {
            border-right: var(--width-separator-thick) solid transparent;

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