@use './variable.scss' as *;

/** @box */
@for $i from 1 through 100 {
  .m-#{$i} {
    margin: #{$i}+#{$unit};
  }
  .mx-#{$i} {
    margin-left: #{$i}+#{$unit};
    margin-right: #{$i}+#{$unit};
  }
  .my-#{$i} {
    margin-top: #{$i}+#{$unit};
    margin-bottom: #{$i}+#{$unit};
  }
  .mtx-#{$i} {
    margin-top: #{$i}+#{$unit};
    margin-left: #{$i}+#{$unit};
    margin-right: #{$i}+#{$unit};
  }
  .mbx-#{$i} {
    margin-bottom: #{$i}+#{$unit};
    margin-left: #{$i}+#{$unit};
    margin-right: #{$i}+#{$unit};
  }
  .mry-#{$i} {
    margin-right: #{$i}+#{$unit};
    margin-top: #{$i}+#{$unit};
    margin-bottom: #{$i}+#{$unit};
  }
  .mly-#{$i} {
    margin-left: #{$i}+#{$unit};
    margin-top: #{$i}+#{$unit};
    margin-bottom: #{$i}+#{$unit};
  }
  .mt-#{$i} {
    margin-top: #{$i}+#{$unit};
  }
  .mb-#{$i} {
    margin-bottom: #{$i}+#{$unit};
  }
  .ml-#{$i} {
    margin-left: #{$i}+#{$unit};
  }
  .mr-#{$i} {
    margin-right: #{$i}+#{$unit};
  }
  .p-#{$i} {
    padding: #{$i}+#{$unit};
  }
  .px-#{$i} {
    padding-left: #{$i}+#{$unit};
    padding-right: #{$i}+#{$unit};
  }
  .py-#{$i} {
    padding-top: #{$i}+#{$unit};
    padding-bottom: #{$i}+#{$unit};
  }
  .ptx-#{$i} {
    padding-top: #{$i}+#{$unit};
    padding-left: #{$i}+#{$unit};
    padding-right: #{$i}+#{$unit};
  }
  .pbx-#{$i} {
    padding-bottom: #{$i}+#{$unit};
    padding-left: #{$i}+#{$unit};
    padding-right: #{$i}+#{$unit};
  }
  .pry-#{$i} {
    padding-right: #{$i}+#{$unit};
    padding-top: #{$i}+#{$unit};
    padding-bottom: #{$i}+#{$unit};
  }
  .ply-#{$i} {
    padding-left: #{$i}+#{$unit};
    padding-top: #{$i}+#{$unit};
    padding-bottom: #{$i}+#{$unit};
  }
  .pt-#{$i} {
    padding-top: #{$i}+#{$unit};
  }
  .pb-#{$i} {
    padding-bottom: #{$i}+#{$unit};
  }
  .pl-#{$i} {
    padding-left: #{$i}+#{$unit};
  }
  .pr-#{$i} {
    padding-right: #{$i}+#{$unit};
  }
}

/** @负的margin */
@for $i from 1 through 30 {
  $val: -$i;
  .nm-#{$i} {
    margin: #{$val}+#{$unit};
  }
  .nmt-#{$i} {
    margin-top: #{$val}+#{$unit};
  }
  .nmb-#{$i} {
    margin-bottom: #{$val}+#{$unit};
  }
  .nml-#{$i} {
    margin-left: #{$val}+#{$unit};
  }
  .nmr-#{$i} {
    margin-right: #{$val}+#{$unit};
  }
}

/** @border-radius */
@for $i from 1 through 100 {
  .radius-#{$i}per {
    border-radius: calc($i / 100);
  }
}
@for $i from 1 through 10 {
  .radius-#{$i} {
    border-radius: $i + #{$unit};
  }
}
.circle {
  border-radius: 50%;
}

/** @border */
@for $i from 1 through 10 {
  .border-#{$i} {
    border: $i + #{$unit} solid;
  }
  .border-top-#{$i} {
    border-top: $i + #{$unit} solid;
  }
  .border-bottom-#{$i} {
    border-bottom: $i + #{$unit} solid;
  }
  .border-left-#{$i} {
    border-left: $i + #{$unit} solid;
  }
  .border-right-#{$i} {
    border-right: $i + #{$unit} solid;
  }
}

/** @opacity */
@for $i from 1 through 10 {
  .opacity-#{$i} {
    opacity: calc($i / 10);
  }
}
/** @scale */
@for $i from 1 through 10 {
  .scale-#{$i} {
    scale: calc($i / 10);
  }
}

/** @box-sizing */
.border-box {
  box-sizing: border-box;
}
.content-box {
  box-sizing: content-box;
}

/** @flex */
.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
@for $i from 2 through 24 {
  .flex-#{$i} {
    flex: $i;
  }
}
.flex-cloumn {
  flex-direction: column;
}
.flex-warp {
  flex-wrap: wrap;
}
.flex-nowarp {
  flex-wrap: nowrap;
}
.shrink-0 {
  flex-shrink: 0;
}
.jt-start {
  justify-content: flex-start;
}
.jt-end {
  justify-content: flex-end;
}
.jt-center {
  justify-content: center;
}
.jt-between {
  justify-content: space-between;
}
.jt-around {
  justify-content: space-around;
}
.it-start {
  align-items: flex-start;
}
.it-end {
  align-items: flex-end;
}
.it-center {
  align-items: center;
}

/* | -- | */
.row-center {
  display: flex;
  align-items: center;
}
/* | __ | */
.row-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* - | - */
.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.col-end {
  display: flex;
  justify-content: flex-end;
}

/* | - | */
.box-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* | - | */
.margin-center {
  margin: 0 auto;
}

/** @hight-width
  * h/w <1-200>  == heght/width: 1~200(unit)
  * dh/dw <1-200>  == heght/width: 2~400(unit)
  * calc-w/h-<1-200> == width: calc(100% - 1(unit))
  * mh/mw <1-200> == min-heght/width: 1~200(unit)
*/
@for $i from 1 through 200 {
  .hw-#{$i} {
    height: #{$i}+#{$unit};
    width: #{$i}+#{$unit};
  }
  .h-#{$i} {
    height: #{$i}+#{$unit};
  }
  .w-#{$i} {
    width: #{$i}+#{$unit};
  }
  .mh-#{$i} {
    min-height: #{$i}+#{$unit};
  }
  .mw-#{$i} {
    min-width: #{$i}+#{$unit};
  }
  .dw-#{$i} {
    width: calc($i * 2) + #{$unit};
  }
  .dh-#{$i} {
    height: calc($i * 2) + #{$unit};
  }
  .calc-h-#{$i} {
    height: calc(100% - #{$i}px);
  }
  .calc-w-#{$i} {
    width: calc(100% - #{$i}px);
  }

  /* absolute px */

  .h-#{$i}px {
    height: $i * 1px;
  }
  .w-#{$i}px {
    width: $i * 1px;
  }
  .hw-#{$i}px {
    height: $i * 1px;
    width: $i * 1px;
  }
  .mh-#{$i}px {
    min-height: $i * 1px;
  }
  .mw-#{$i}px {
    min-width: $i * 1px;
  }
  .dh-#{$i}px {
    height: $i * 2px;
  }
  .dw-#{$i}px {
    width: $i * 2px;
  }
  .calc-h-#{$i}px {
    height: calc(100% - #{$i}px);
  }
  .calc-w-#{$i}px {
    width: calc(100% - #{$i}px);
  }
}
@for $i from 1 through 100 {
  .h-#{$i}vh {
    height: $i * 1vh;
  }
  .h-#{$i}per {
    height: 1% * $i;
  }
  .w-#{$i}vw {
    width: $i * 1vw;
  }
  .w-#{$i}per {
    width: 1% * $i;
  }
}
.h-full {
  height: 100%;
}
.w-full {
  width: 100%;
}
.full {
  height: 100%;
  width: 100%;
}

/** @line-height */
@for $i from 1 through 50 {
  .lh-#{$i} {
    line-height: #{$i}+#{$unit};
  }
}

/** use-layout  : 开启布局模式 - 将行和列分为24 , 同时支持响应式布局
<div class="use-layout dh-200">

  <div class="use-row row-span-m">
    <div class="col-span-s"></div>
    <div class="col-span-l"></div>
  </div>

  <div class="use-row row-span-m">
    <div class="col-span-12"></div>
    <div class="col-span-m"></div>
  </div>

</div>
 */
.use-layout {
  .use-row {
    display: flex;
    flex-wrap: nowrap;

    @for $i from 1 through 24 {
      .col-span-#{$i} {
        width: calc(100% * #{$i} / 24);
        height: 100%;
      }
    }

    .col-span-xl {
      width: calc(100% * 24 / 24);
      height: 100%;
    }

    .col-span-l {
      width: calc(100% * 18 / 24);
      height: 100%;
    }

    .col-span-m {
      width: calc(100% * 12 / 24);
      height: 100%;
    }

    .col-span-s {
      width: calc(100% * 6 / 24);
      height: 100%;
    }

    .col-span-xs {
      width: calc(100% * 1 / 24);
      height: 100%;
    }
  }

  @for $i from 1 through 24 {
    .row-span-#{$i} {
      height: calc(100% * #{$i} / 24);
      width: 100%;
    }
  }

  .row-span-xl {
    height: calc(100% * 24 / 24);
    width: 100%;
  }

  .row-span-l {
    height: calc(100% * 18 / 24);
    width: 100%;
  }

  .row-span-m {
    height: calc(100% * 12 / 24);
    width: 100%;
  }

  .row-span-s {
    height: calc(100% * 6 / 24);
    width: 100%;
  }

  .row-span-xs {
    height: calc(100% * 1 / 24);
  }
}

/** @align-content */

.align-content-start {
  align-content: start;
}
.align-content-center {
  align-content: center;
}
.align-content-between {
  align-content: space-between;
}
.align-content-around {
  align-content: space-around;
}

/** @text */
.t-wrap {
  word-wrap: break-word;
}
.t-nowrap {
  white-space: nowrap;
}
.t-ellipsis {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}
@for $i from 12 through 50 {
  .ts-#{$i} {
    font-size: #{$i}+#{$unit};
  }
}
@each $i in 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900 {
  .tw-#{$i} {
    font-weight: $i;
  }
}
.t-bold {
  font-weight: bold;
}
.t-center {
  vertical-align: middle;
  text-align: center;
}
.t-right {
  text-align: right;
}
.t-left {
  text-align: left;
}

/** @overflow */
.x-hidden {
  overflow-x: hidden;
}
.y-hidden {
  overflow-y: hidden;
}
.xy-hidden {
  overflow: hidden;
}
.x-auto {
  overflow-x: auto;
}
.y-auto {
  overflow-y: auto;
}
.xy-auto {
  overflow: auto;
}
.x-scroll {
  overflow-x: scroll;
}
.y-scroll {
  overflow-y: scroll;
}
.xy-scroll {
  overflow: scroll;
}

/** @cursor */
.pointer {
  cursor: pointer;
}
.not-allowed {
  cursor: not-allowed;
}
.wait {
  cursor: wait;
}
.help {
  cursor: help;
}
.default {
  cursor: default;
}
.move {
  cursor: move;
}
.text {
  cursor: text;
}
.underline {
  text-decoration: underline;
}

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

/** @position */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

@for $i from 1 through 200 {
  .top-#{$i} {
    top: #{$i}+#{$unit};
  }
  .right-#{$i} {
    right: #{$i}+#{$unit};
  }
  .bottom-#{$i} {
    bottom: #{$i}+#{$unit};
  }
  .left-#{$i} {
    left: #{$i}+#{$unit};
  }

  .top-#{$i}px {
    top: $i * 1px;
  }
  .right-#{$i}px {
    right: $i * 1px;
  }
  .bottom-#{$i}px {
    bottom: $i * 1px;
  }
  .left-#{$i}px {
    left: $i * 1px;
  }
}

.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

/** @display */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.hidden-display {
  visibility: hidden;
}
.show-display {
  visibility: visible;
}
.none-display {
  display: none;
}

/** @float */
.float-l {
  float: left;
}
.float-r {
  float: right;
}
.float-none {
  float: none;
}

/** @clear */
.clear-l {
  clear: left;
}
.clear-r {
  clear: right;
}
.clear-both {
  clear: both;
}

/** @user-select */
.us-none {
  user-select: none;
}
.us-text {
  user-select: text;
}
.us-all {
  user-select: all;
}

/** @pointer-events */
.p-event-none {
  pointer-events: none;
}

/** @system-color */

.bg-white {
  background-color: white;
}
.color-white {
  color: white;
}
.bg-black {
  background-color: black;
}
.color-black {
  color: black;
}
.bg-red {
  background-color: red;
}
.color-red {
  color: red;
}
.bg-green {
  background-color: green;
}
.color-green {
  color: green;
}
.bg-blue {
  background-color: blue;
}
.color-blue {
  color: blue;
}
.bg-yellow {
  background-color: yellow;
}
.color-yellow {
  color: yellow;
}
.bg-orange {
  background-color: orange;
}
.color-orange {
  color: orange;
}
.bg-gray {
  background-color: gray;
}
.color-gray {
  color: gray;
}
.bg-pink {
  background-color: pink;
}
.color-pink {
  color: pink;
}
.bg-purple {
  background-color: purple;
}
.color-purple {
  color: purple;
}
.bg-brown {
  background-color: brown;
}
.color-brown {
  color: brown;
}
.bg-transparent {
  background-color: transparent;
}
.color-transparent {
  color: transparent;
}
.border-color-white {
  border-color: white;
}
.border-color-black {
  border-color: black;
}
.border-color-red {
  border-color: red;
}
.border-color-green {
  border-color: green;
}