.ui-tab-container {
    display: flex;
    flex-direction: column;

    --header-line-height: 24px;
    --header-padding: 6px 6px 0;
    --header-hover-color: #b9b9b9;
    --header-selected-color: rgb(173, 84, 12);

    >.ui-tab-header {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: wrap;
        line-height: var(--header-line-height);
        padding: var(--header-padding);
        border-bottom: 1px solid var(--border-color);
        user-select: none;

        >.ui-tab-title {
            border: 1px solid transparent;
            background-color: var(--bg-color);
            cursor: pointer;
            padding: 0 12px;

            &:hover {
                color: var(--header-hover-color);
            }

            &.selected {
                border-color: var(--border-color);
                border-bottom-color: var(--bg-color);
                color: var(--header-selected-color);
            }
        }
    }

    >.ui-tab-page {
        flex: 1 1 auto;
        padding: 6px;
        overflow: auto;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        display: none;
    }
}