/* vue3 element plus 用的自定义 css 属性 与 自定义 组件css样式 */

:root {
    /* 覆盖element默认主题色 */
    --el-color-primary: #44b1e0 !important;
    --el-color-primary-dark-2: #3e91cc !important;
    --el-color-primary-light-3: #67bae1 !important;
    --el-color-primary-light-5: #8dc6e3 !important;
    --el-color-primary-light-7: #b2d4e7 !important;
}

body {
    /* 用于标定 QOR 页面上方 toolbar 的高度 (用于动态计算布局) */
    --page-header: 64px !important;
}

@media (max-width: 1024px) {
    body {
        /* 在页面宽度小于1024px时，将--page-header的值修改为48px */
        --page-header: 56px !important;
    }
}

/* 隐藏滚动条的轨道和背景，只显示滚动滑块 */
::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
    height: 8px; /* 滚动条高度 */
}

::-webkit-scrollbar-track {
    background: transparent; /* 设置滚动条轨道为透明 */
    border-radius: 4px; /* 滚动条轨道圆角 */
}

::-webkit-scrollbar-thumb {
    background-color: #cbcbcb; /* 设置滚动滑块颜色 */
    border-radius: 8px; /* 滚动滑块圆角 */
    border: 2px solid transparent; /* 设置透明边框 */
    background-clip: content-box; /* 使滑块内边距显示 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #b7b7b7; /* 滑块悬停时的颜色变化 */
}

.span-dividing {
    /* 自定义分割线 橫向*/
    margin-top: 14px;
    margin-bottom: 14px;
    border-style: solid;
    border-width: thin 0 0;
    border-color: #e4e7ed;
    display: block;
    flex: 1 1 100%;
    height: 0;
    max-height: 0;
    opacity: 0.75;
    transition: inherit;
}

/* 自定义分割线 纵向 TODO:待完成 */
.span-dividing-vertical {
    margin-top: 14px;
    margin-bottom: 14px;
    border-style: solid;
    border-width: thin 0 0;
    border-color: #e4e7ed;
    display: block;
    flex: 1 1 100%;
    height: 0;
    max-height: 0;
    opacity: 0.75;
    transition: inherit;
}

/* region 自定义 chip 样式 */
.custom-chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.custom-chip {
    display: flex;
    align-items: center;
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    border-radius: 20px;
    padding: 6px 10px;
    margin: 2px 0;
    font-size: 14px;
    line-height: 1;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    cursor: default;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.custom-chip-success {
    font-weight: bold;
    color: white !important;
    background-color: var(--el-color-success) !important;
}

.custom-chip-warning {
    font-weight: bold;
    color: white !important;
    background-color: var(--el-color-warning) !important;
}

.custom-chip-danger {
    font-weight: bold;
    color: white !important;
    background-color: var(--el-color-danger) !important;
}

.custom-chip-info {
    font-weight: bold;
    color: white !important;
    background-color: var(--el-color-info) !important;
}

.custom-chip:hover {
    background-color: var(--el-color-primary-light-8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chip-close-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    cursor: pointer;
    color: var(--el-color-primary);
    transition: color 0.2s;
}

.chip-close-icon:hover {
    color: var(--el-color-primary-dark-2);
}

/* endregion 自定义 chip 样式 */


/* 无全选 */
.no-select-all .el-table__header-wrapper .el-checkbox {
    display: none !important;
}

/* 中号 覆盖 checkbox 样式 增大选择框 */
.middle-checkbox .el-checkbox__inner {
    /* checkbox 宽高 */
    width: 18px !important;
    height: 18px !important;
}

.middle-checkbox .el-checkbox__inner::after {
    /* checkbox 内部勾勾宽高 */
    height: 8px !important;
    left: 6px !important;
    top: 2px;
}

.middle-checkbox .el-checkbox__input.is-checked .el-checkbox__inner:after {
    /* checkbox 勾勾宽度 */
    border: 2px solid var(--el-checkbox-checked-icon-color);
    border-left: 0;
    border-top: 0;
    box-sizing: content-box;
}

.middle-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
    /* checkbox 横线宽高 全选框的 未全部选中的样式 */
    height: 4px !important;
    top: 6px !important;
}


/* 大号 覆盖 checkbox 样式 增大选择框 */
.large-checkbox .el-checkbox__inner {
    /* checkbox 宽高 */
    width: 24px !important;
    height: 24px !important;
}

.large-checkbox .el-checkbox__inner::after {
    /* checkbox 内部勾勾宽高 */
    height: 12px !important;
    left: 8px !important;
    top: 3px;
}

.large-checkbox .el-checkbox__input.is-checked .el-checkbox__inner:after {
    /* checkbox 勾勾宽度 */
    border: 3px solid var(--el-checkbox-checked-icon-color);
    border-left: 0;
    border-top: 0;
    box-sizing: content-box;
}

.large-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
    /* checkbox 横线宽高 全选框的 未全部选中的样式 */
    height: 6px !important;
    top: 8px !important;
}

/* 辅助 */
.fill-width {
    width: 100%;
}