cssOMS/tab.scss

.tabview {
    .tab-links {
        color: #000;
        padding: 0.3rem 0 0 0;

        label {
            font-size: 0.9em;
            user-select: none;
            cursor: pointer;
            border: 1px solid var(--button-colored-background);
            white-space: nowrap;

            &:hover, &:focus {
                color: var(--text-on-background-color-2);
                background: var(--button-colored-background-hover);
                border: 1px solid var(--button-colored-background-hover);
                outline: none;
            }
        }

        .active label:hover, .active label:focus {
            color: var(--text-on-background-color-2);
            background: var(--button-colored-background-hover);
            border: 1px solid var(--button-colored-background-hover);
            outline: none;
        }

        .active {
            label {
                cursor: default;
            }
        }

        li {
            display: inline-block;
        }
    }

    .tab-content {
        > input {
            display: none;
        }

        > input + div {
            display: none;
        }

        > input:checked + div {
            display: inherit;
        }
    }
}

.tab-1 {
    .tab-links {
        margin: 0 0 10px 1px;

        label {
            padding: 5px;
            background: none;
            overflow: auto;
            background: #fff;
        }

        .active, .active label {
            color: var(--text-on-background-color-2);
            background: var(--button-colored-background);
        }

        /*
        .active label {
            border: 1px solid var(--box-border);
        }
        */

        li {
            margin: 0 5px 0 0;
        }
    }

    .tab-content {
        box-sizing: border-box;
        border: 1px solid var(--button-colored-background);
        background: #fff;

        padding: 10px;
    }

    &.left {
        display: flex;

        .tab-links {
            margin: 0;
            border: none;

            li {
                display: block;
                margin-bottom: 20px;
            }

            .active label {
                border: 1px solid var(--box-border);
            }
        }

        .tab-content {
            width: 100%;
        }
    }
}

.tab-2 {
    .tab-links {
        label {
            padding: 5px 10px 5px 10px;
        }

        li {
            margin: 0 5px 15px 0;
        }

        .active a, .active label {
            color: var(--text-on-background-color-2);
            background: var(--button-colored-background)
        }
    }

    &.left {
        display: flex;

        .tab-links {
            margin: 0;
            border: none;

            li {
                display: block;
                margin-bottom: 20px;
            }

            .active label {
                border: 1px solid var(--box-border);
            }
        }

        .tab-content {
            width: 100%;
        }
    }
}