/* 公共css样式 */

/* ==================
        初始化
 ==================== */
a {
    text-decoration: none;
}
/* ==================
        鼠标样式
 ==================== */
.g-cursor-pointer {
    cursor: pointer;
}
.g-cursor-not {
    cursor: not-allowed;
}
.g-cursor-default {
    cursor: default;
}

/* ==================
          内边距
 ==================== */
@for $i from 17 through 20 {
    .g-pa-#{$i} {
        padding: ($i * 4) px;
    }
    .g-px-#{$i} {
        padding: 0 ($i * 4) px;
    }
    .g-py-#{$i} {
        padding: ($i * 4) px 0;
    }
    .g-pl-#{$i} {
        padding-left: ($i * 4) px;
    }
    .g-pr-#{$i} {
        padding-right: ($i * 4) px;
    }
}

/* ==================
          外边距
 ==================== */
@for $i from 17 through 20 {
    .g-ma-#{$i} {
        margin: ($i * 4) px;
    }
    .g-mx-#{$i} {
        margin: 0 ($i * 4) px;
    }
    .g-my-#{$i} {
        margin: ($i * 4) px 0;
    }
    .g-ml-#{$i} {
        margin-left: ($i * 4) px;
    }
    .g-mr-#{$i} {
        margin-right: ($i * 4) px;
    }
}

/* ==================
        高度+宽度
 ==================== */
.g-height {
    height: 100%;
}
.g-width {
    width: 100%;
}
.g-wh {
    width: 100%;
    height: 100%;
}
.g-wh-v {
    width: 100vw;
    height: 100vh;
}
@for $i from 1 through 10 {
    .g-width-#{$i} {
        width: $i * 10%;
    }
}
.g-width-nav {
    max-width: 260px !important;
}

.vtk-min-height {
    min-height: 100%;
}
.vtk-min-width {
    min-width: 100%;
}
.vtk-height {
    height: 100%;
}
.vtk-width {
    width: 100%;
}
.vtk-wh {
    width: 100%;
    height: 100%;
}
.vtk-wh-v {
    width: 100vw;
    height: 100vh;
}
@for $i from 1 through 10 {
    .vtk-width-#{$i} {
        width: $i * 10% !important;
        max-width: $i * 10% !important;
    }
}
/* ==================
          颜色
 ==================== */
.g-white{
    background: white;
}
 .theme--dark.g-white{
     background: #1E1E1E;
 }
 //渐变色
.g-grad-blue {
    background: linear-gradient(226deg, #3eddff 0%, #008ef0 100%);
}
.g-grad-cyan {
    background: linear-gradient(226deg, #31e1c0 0%, #19a090 100%);
}
.g-grad-green {
    background: linear-gradient(226deg, #79dd43 0%, #00a23d 100%);
}
.g-grad-orange {
    background: linear-gradient(226deg, #ffc042 0%, #fa7414 100%);
}
.g-grad-yellow {
    background: linear-gradient(226deg, #ffdd33 0%, #faa700 100%);
}
.g-grad-red {
    background: linear-gradient(226deg, #ff7d7d 0%, #ca0000 100%);
}
.g-grad-indigo {
    background: linear-gradient(226deg, #00b0d6 0%, #000bc0 100%);
}

/* ==================
          文本
 ==================== */
@for $i from 5 through 30 {
    .g-size-#{$i} {
        font-size: ($i * 2) px;
    }
}
.g-text-indent {
    text-indent: 2em;
}
//文本超出隐藏并显示省略号
.g-text-overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
@for $i from 5 through 30 {
    .g-text-overflow-#{$i} {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $i;
        line-clamp: $i;
        -webkit-box-orient: vertical;
    }
}
/* ==================
        对齐方式
 ==================== */
.g-v-align-sub {
    vertical-align: sub;
}
.g-v-align-super {
    vertical-align: super;
}
.g-v-align-top {
    vertical-align: top;
}
.g-v-align-middle {
    vertical-align: middle;
}
.g-v-align-bottom {
    vertical-align: bottom;
}

/* ==================
        滚动条样式
 ==================== */
.g-scrollbar {
    overflow-x: hidden;
    overflow: hidden;
    overflow-y: scroll;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background-color: rgb(212, 212, 212);
        background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0) 50%,
            rgba(255, 255, 255, 0) 75%,
            transparent 75%,
            transparent
        );
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
        background: #ededed00;
        border-radius: 10px;
    }
}

/* ==================
          边框
 ==================== */
.g-border-dotted {
    border: rgb(228, 228, 228) 1px dotted;
}
.g-border-dashed {
    border: rgb(228, 228, 228) 1px dashed;
}
.g-border-solid {
    border: rgb(228, 228, 228) 1px solid;
}

/* ==================
          背景
 ==================== */
.g-shadow {
    box-shadow: #3333331a 1px 1px 8px !important;
}

.g-no-shadow {
    box-shadow: none !important;
}

/* ==================
          图片
 ==================== */

/* ==================
          头像
 ==================== */

/* ==================
          加载
 ==================== */

/* ==================
          列表
 ==================== */

/* ==================
         表单
 ==================== */

/* ==================
         模态窗口
 ==================== */

/* ==================
          步骤条
 ==================== */

/* ==================
    v-select 下拉列表滚动条
 ==================== */