@import url('./root.css');
@import url('./reset.css');
@import url('./element-variables.scss');
@import url('./../assets/iconfont/iconfont.css');

html {
  height: 100%;
  box-sizing: border-box;
}
body {
  height: 100%;
  margin: 0px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "din", "PingFang", "NotoSansHans-Regular", Helvetica Neue, Helvetica, PingFang SC,
    Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}

h2 {
  font-size: 20px;
}
h3 {
  font-size: 18px;
}
h4 {
  font-size: 16px;
}
p, div {
  font-size: 14px;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-none {
  display: none !important;
}

.flex-row,
.d-flex {
  display: flex;
}
.flex-space,
.space-between {
  display: flex;
  justify-content: space-between;
}
.flex-left {
  display: flex;
}
.flex-right,
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.flex-alignC {
  display: flex;
  align-items: center;
}
.align-center {
  align-items: center;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-middle,
.flex-center {
  display: flex;
  justify-content: center;
}

.nowrap {
  white-space: nowrap;
}
.pointer {
  cursor: pointer;
}
.select-none {
  user-select: none;
}

// 通用的间距
$marginKey: 0, 4, 6, 8, 10, 12, 16, 18, 20, 24, 26, 28, 30, 32, 34;
@each $i in $marginKey{
  .p-#{$i}px {
    padding: $i * 1px !important;
  }
  .px-#{$i}px {
    padding-left: $i * 1px !important;
    padding-right: $i * 1px !important;
  }
  .py-#{$i}px {
    padding-top: $i * 1px !important;
    padding-bottom: $i * 1px !important;
  }
  .pl-#{$i}px {
    padding-left: $i * 1px !important;
  }
  .pt-#{$i}px {
    padding-top: $i * 1px !important;
  }
  .pb-#{$i}px {
    padding-bottom: $i * 1px !important;
  }
  .pr-#{$i}px {
    padding-right: $i * 1px !important;
  }

  .m-#{$i}px {
    margin: $i * 1px !important;
  }
  .mx-#{$i}px {
    margin-left: $i * 1px !important;
    margin-right: $i * 1px !important;
  }
  .my-#{$i}px {
    margin-top: $i * 1px !important;
    margin-bottom: $i * 1px !important;
  }
  .ml-#{$i}px {
    margin-left: $i * 1px !important;
  }
  .mt-#{$i}px {
    margin-top: $i * 1px !important;
  }
  .mb-#{$i}px {
    margin-bottom: $i * 1px !important;
  }
  .mr-#{$i}px {
    margin-right: $i * 1px !important;
  }
}

.icon-16-wrapper {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  .icon-16 {
    width: 16px;
    height: 16px;
    filter: drop-shadow(16px 0 var(--color-primary));
    position: absolute;
    z-index: 2;
  }
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-nowrap {
  white-space: nowrap;
}

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

.w-25 {
  width: 25% !important;
}
.w-33 {
  width: 33.33333333333333% !important;
}
.w-50 {
  width: 50% !important;
}
.w-66 {
  width: 66.66666666666666% !important;
}
.w-100 {
  width: 100% !important;
}
.h-25 {
  height: 25% !important;
}
.h-33 {
  height: 33.33333333333333% !important;
}
.h-50 {
  height: 50% !important;
}
.h-66 {
  height: 66.66666666666666% !important;
}
.h-100 {
  height: 100% !important;
}