plain-ui/src/scss/components/_tabs.scss

/**
 *
 *
 *
 */

@mixin plain-ui__component__tabs()
{
    .tabs {
        display: flex;
        flex-direction: column;

        width: 100%;
        border-bottom: $plain-ui__border;

        @include plain-ui__media-sm() {
            width: auto;
            flex-direction: row;
        }

        &__item {
            min-height: 2.8em;

            display: flex;
            align-items: center;
            padding: 0 1em;
            color: var(--text);

            transition: background-color 0.1s;

            border-bottom: 3px solid transparent;
            background-color: transparent;

            width: 100%;

            @include plain-ui__media-sm() {
                width: auto;
                display: inline-flex;
            }

            &:hover {
                cursor: pointer;
                background-color: var(--primary-active);
                color: var(--text-secondary);

                border-top-left-radius: $plain-ui__border-radius;
                border-top-right-radius: $plain-ui__border-radius;
            }

            &--selected {
                color: var(--text);
                border-color: var(--primary);
            }
        }
    }
}