// utils 工具// 颜色

@import "./varible";
.bg-error {
    background-color: $color-error !important;
}
.text-error {
    color: $color-error !important;
}
.text-success {
    color: $color-success !important;
}
.text-warning {
    color: $color-warning !important;
}
.text-primary {
    color: $color-primary !important;
}
.text-normal {
    color: #404042 !important;
}
.text-black {
    color: #000;
}
.text-dark {
    color: #333;
}
.text-deep {
    color: #555;
}
.text-weak {
    color: #b3b3b3;
}
.text-white {
    color: #fff;
}

.text-error.disabled {
    color: #aaa !important;
}

// 文字对齐
.tl {
    text-align: left;
}
.tc {
    text-align: center;
}
.tr {
    text-align: right;
}
// 浮动与清除浮动
.fl {
    float: left;
}
.fr {
    float: right;
}
.fix {
    *zoom: 1;
}
.fix:after {
    display: table;
    content: "";
    clear: both;
}
// 显示
.dn {
    display: none;
}
.di {
    display: inline;
}
.db {
    display: block;
}
.dib {
    display: inline-block;
}
.dt {
    display: table;
}
div.dib {
    *display: inline;
    *zoom: 1;
}
.vm {
    vertical-align: middle;
}
.vib {
    display: inline-block;
    vertical-align: middle;
}
.ovh {
    overflow: hidden;
}
// 定位
.pr {
    position: relative;
}
.pa {
    position: absolute;
}
.pf {
    position: fixed;
}

.align-middle {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.align-middle-wrap {
    display: flex;
    align-items: center;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@for $i from 1 through 100 {
    .width-#{$i} {
        width: $i * 1%;
    }
    .height-#{$i} {
        height: $i * 1px;
    }
    // @if $i<50 and $i%2==0 {
    // @if $i<50  {
    .ml-#{$i} {
        margin-left: $i * 1px !important;
    }
    .mr-#{$i} {
        margin-right: $i * 1px !important;
    }
    .mt-#{$i} {
        margin-top: $i * 1px !important;
    }
    .mb-#{$i} {
        margin-bottom: $i * 1px !important;
    }
    // }
}

// 字体
@for $i from 10 through 28 {
    .f#{$i} {
        font-size: $i * 1px;
    }
}

// 分段 Tab（设置中心「桌面应用」角色分段 / 系统设置「应用管理」角色分段共用，替代 iView Tabs 观感）
.seg-tabs {
    display: inline-flex;
    background: #f0f2f6;
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
    .sg {
        padding: 6px 16px;
        font-size: 13px;
        border-radius: 7px;
        color: #7a8088;
        cursor: pointer;
        transition: all 0.15s;
        user-select: none;
        &:hover {
            color: #5979ea;
        }
        &.active {
            background: #fff;
            color: #5979ea;
            font-weight: 600;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        }
    }
}

// .chart-box {
//     height: 50px;
//     width: 100%;
//     border-bottom: 50px solid;
//     border-image: linear-gradient(90deg, #f55c65 0%, #fcced0 48%, #d4dffc 52%, #7194f5 100%) 50 50 50 50;
// }
// @for $i from 0 through 50 {
//     .blue-#{$i} {
//         background-color: rgba(#7194f5, 0.1 * $i * 0.2);
//     }
// }
// @for $i from 0 through 50 {
//     .red-#{$i} {
//         background-color: rgba(#f55c65, 0.1 * $i * 0.2);
//     }
// }