@import './element-variables.scss';
// @font-face {
//   font-family: "Lexend";
//   src: url('../font/Lexend-Regular.ttf');
// }

// @font-face {
//   font-family: "ZenDots";
//   src: url('../font/ZenDots-Regular.ttf');
// }

// @font-face {
//   font-family: "Noto";
//   font-weight: normal;
//   font-style: normal;
//   src: url('../font/NotoSans-Bold-5.ttf');
// }

// @font-face {
//   font-family: "Monitor";
//   src: url('../font/Monitor_title.ttf');
// }
/*
  font-size
*/
@for $i from 10 through 100 {
  .fs-#{$i} {
    font-size: #{$i}px;
  }
}

/*
  width
*/
@for $i from 0 through 1000 {
  .w-#{$i} {
    width: #{$i}+'%';
  }

  .w-p-#{$i} {
    width: #{$i}px;
  }
}

/*
  height
*/
@for $i from 0 through 100 {
  .h-#{$i} {
    height: #{$i}+'%';
  }
}

/*
  border-radius
*/
@for $i from 0 through 100 {
  .border-radius-#{$i} {
    border-radius: #{$i}px;
  }
}

/*
  top
*/
@for $i from 0 through 200 {
  .top-#{$i} {
    top: #{$i}px;
  }
}

/*
  left
*/
@for $i from 0 through 200 {
  .left-#{$i} {
    left: #{$i}px;
  }

  .left-p-#{$i} {
    left: #{$i}+'%';
  }
}

/*
  right
*/
@for $i from 0 through 200 {
  .right-#{$i} {
    right: #{$i}px;
  }
}

/*
  bottom
*/
@for $i from 0 through 200 {
  .bottom-#{$i} {
    bottom: #{$i}px;
  }
}

/*
  margin
*/

.ma-c {
  margin: auto;
}

@for $i from 0 through 200 {
  .ma-#{$i} {
    margin: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mx-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}

/*
  padding
*/
@for $i from 0 through 200 {
  .pa-#{$i} {
    padding: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-row {
  @extend .flex;
  flex-direction: row;
}

.flex-col {
  @extend .flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-row-c {
  @extend .flex-row;
  justify-content: center;
  align-items: center;
}

.flex-row-e-c {
  @extend .flex-row;
  justify-content: end;
  align-items: center;
}

.flex-row-c-t {
  @extend .flex-row;
  justify-content: center;
  align-items: flex-start;
}

.flex-row-s-c {
  @extend .flex-row;
  justify-content: start;
  align-items: center;
}

.flex-row-c-b {
  @extend .flex-row;
  justify-content: center;
  align-items: flex-end;
}

.flex-row-sb {
  @extend .flex-row;
  justify-content: space-between;
}

.flex-row-sb-c {
  @extend .flex-row;
  justify-content: space-between;
  align-items: center;
}

.flex-row-sb-s {
  @extend .flex-row;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-row-sb-e {
  @extend .flex-row;
  justify-content: space-between;
  align-items: flex-end;
}

.flex-row-sa {
  @extend .flex-row;
  justify-content: space-around;
  align-items: center;
}

.flex-row-sa-s {
  @extend .flex-row;
  justify-content: space-around;
  align-items: flex-start;
}

.flex-row-sa-e {
  @extend .flex-row;
  justify-content: space-around;
  align-items: flex-end;
}

.flex-col-c {
  @extend .flex-col;
  align-items: center;
}

.flex-col-c-c {
  @extend .flex-col;
  justify-content: center;
  align-items: center;
}

.flex-col-m {
  @extend .flex-col;
  justify-content: center;
}

.flex-col-sb {
  @extend .flex-col;
  justify-content: space-between;
}

@for $i from 0 through 200 {
  .flex-gap-#{$i} {
    gap: #{$i}px;
  }
}

.overflow-h {
  overflow: hidden;
}

.overflow-a {
  overflow: auto;
}

.overflow-x {
  overflow-x: auto;
  overflow-y: hidden;
}

.overflow-y {
  overflow-x: hidden;
  overflow-y: auto;
}

.fw-bold {
  font-weight: bolder;
}

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

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

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

.text-color-primary {
  color: $--color-primary;
}

.text-color-white {
  color: #fff;
}

.text-color-light {
  color: #a6a6a6;
}

.text-color-warning {
  color: #faab0c;
}

.text-color-error {
  color: #ff6e6e;
}

.text-underline {
  text-decoration: underline;
}

.pos-rel {
  position: relative;
}

.pos-ab {
  position: absolute;
}

.pos-fix {
  position: fixed;
}

.bg-white {
  background-color: #fff;
}

.text-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.descriptions-table {
  width: 100%;
  border-collapse: collapse;
  td,
  th {
    border: 1px solid #ebeef5;
    padding: 8px 10px;
  }
  th {
    color: #909399;
    background: #fafafa;
    font-weight: 400;
    width: 100px;
    text-align: left;
  }
}

.box-sizing {
  box-sizing: border-box; 
}