cssOMS/tab.scss

.tabview {
    &.right > .box {
        order: 2;
    }
}

.tab-links {
    color: #000;
    padding: 5px 0 0 0;

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

        &:hover, &:focus {
            color: var(--txt-on-bg-c-2);
            background: var(--btn-c-bg-hover);
            border: 1px solid var(--btn-c-bg-hover);
            outline: none;
        }
    }

    .active label:hover, .active label:focus {
        color: var(--txt-on-bg-c-2);
        background: var(--btn-c-bg-hover);
        border: 1px solid var(--btn-c-bg-hover);
        outline: none;
    }

    .active {
        label {
            cursor: default;
        }
    }

    li {
        display: inline-block;
    }
}

.tab-content {
    display: flex;
    flex: 1;

    > input, > input + div {
        display: none;
    }

    > input:checked + div {
        display: flex;
        flex: 1;
        flex-direction: column;
    }
}

.tab {
    max-width: 100%;
}

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

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

        .active, .active label {
            color: var(--txt-on-bg-c-2);
            background: var(--btn-c-bg);
        }

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

    .tab {
        max-width: 100%;
    }

    .tab-content {
        box-sizing: border-box;
        border: 1px solid var(--btn-c-bg);
        background: #fff;
        padding: 10px;
    }

    &.left, &.right {
        display: flex;

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

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

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

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

.tab-2 {
    display: flex;
    flex: 1;
    flex-direction: column;

    .tab {
        max-width: 100%;
    }

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

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

        .active a, .active label {
            color: var(--txt-on-bg-c-2);
            background: var(--btn-c-bg)
        }
    }

    &.left, &.right {
        flex-direction: row;

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

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

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

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