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

/**
 *  
 *  tabs
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

.tabs {
    display: flex;
    flex-direction: column;

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

    @include 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 media-sm() {
            width: auto;
            display: inline-flex;
        }

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

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

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

    &--contrast {
        border: 0;

        .tabs__item {
            color: var(--text-contrast);

            &:hover {
                background-color: var(--background-contrast);
                color: var(--text);
                border-radius: 0;
            }
        }

        .tabs__item--selected {
            border-color: var(--border-contrast);

            &:hover {
                border-color: var(--active);
            }
        }
    }
}