:root {
    /* 字体大小规范 */
    --font-x-large: 18px;
    --font-large: 16px;
    --font-medium: 14px;
    --font-small: 12px;
    --font-x-small: 10px;
    /* 颜色规范 */
    --color-default: #384048;
    --color-primary: #3077af;
    --color-secondary: #4786bb;
    --color-info: #999;
    --color-border: #eee;
    /* 间距规范 */
    --space-medium: 20px;
    /* 状态栏 */
    --statusbar-height: 56px;
    /* 标签栏 */
    --tabbar-active: var(--color-primary);
    --tabbar-hover: #eee;
    --tabbar-close-hover: red;
    /* 侧边栏 */
    --sidebar-width: 180px;
    --sidebar-background: var(--color-primary);
    --sidebar-header-height: 56px;
    --sidebar-menu-inline: #fff;
    --sidebar-menu-item: #b3d5ef;
    --sidebar-menu-item-hover: #4786bb;
    --sidebar-menu-item-active: #266091;

    --el-color-primary: var(--color-primary);
    --el-color-primary-light-3: #4b95ce;
    --el-color-primary-light-5: #70abd8;
    --el-color-primary-light-7: #c6e2ff;
    --el-color-primary-light-8: #d9ecff;
    --el-color-primary-light-9: #ecf5ff;
    --el-color-primary-dark-2: #2d70a3;

    .el-form {
        &-item {
            &--col {
                display: flex;
                width: 100%;
                gap: 10px;
            }

            &:last-child {
                margin-bottom: 18px;
            }
        }

        &--horizontal {
            display: flex;
            flex-wrap: wrap;

            .el-form-item {
                width: 50%;

                &__label {
                    padding: 0 12px;
                }

                &__content {
                    align-items: flex-start;
                    padding-right: 48px;
                }

                &--row {
                    width: 100%;
                }
            }

            .el-select,
            .el-input-number {
                width: 100%;
            }
        }

        &--vertical {

            .el-select,
            .el-input-number {
                width: 100%;
            }
        }
    }

    .app-tabs {
        &__navbar {
            z-index: 10;
            display: flex;
            align-items: center;
            background-color: #fff;
            box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .1);
            padding: 8px 20px 0 20px;

            &:empty {
                display: none;
            }

            .tabs {
                &-item {
                    height: 40px;
                    line-height: 40px;
                    color: #777;
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;
                    cursor: pointer;
                    padding: 0 20px;

                    &:not(:first-child) {
                        margin-left: 4px;
                    }

                    &:hover {
                        color: inherit;
                        background-color: var(--tabbar-hover);
                    }

                    &.is-active {
                        color: #fff !important;
                        background-color: var(--tabbar-active);
                        border-bottom: 0;
                    }
                }
            }
        }
    }
}