@use './ant';
@use 'asset/icons/icon';
@use 'asset/fonts/font';

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
}

#app {
  width: 100%;
  height: 100%;
}

.full {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@for $i from 0 through 100 {
  .size-#{$i * 2} {
    font-size: $i * 2px !important;
  }

  .w-#{$i * 4} {
    width: $i * 4px !important;
  }

  .p-#{$i * 2} {
    padding: $i * 2px !important;
  }
  .ph-#{$i * 2} {
    padding-inline: $i * 2px !important;
  }
  .pv-#{$i * 2} {
    padding-block: $i * 2px !important;
  }
  .pl-#{$i * 2} {
    padding-left: $i * 2px !important;
  }
  .pr-#{$i * 2} {
    padding-right: $i * 2px !important;
  }
  .pt-#{$i * 2} {
    padding-top: $i * 2px !important;
  }
  .pb-#{$i * 2} {
    padding-bottom: $i * 2px !important;
  }

  .m-#{$i * 2} {
    margin: $i * 2px !important;
  }
  .mh-#{$i * 2} {
    margin-inline: $i * 2px !important;
  }
  .mv-#{$i * 2} {
    margin-block: $i * 2px !important;
  }
  .ml-#{$i * 2} {
    margin-left: $i * 2px !important;
  }
  .mr-#{$i * 2} {
    margin-right: $i * 2px !important;
  }
  .mt-#{$i * 2} {
    margin-top: $i * 2px !important;
  }
  .mb-#{$i * 2} {
    margin-bottom: $i * 2px !important;
  }
}