$spacing-size: (
  0: 0,
  2: 2,
  4: 4,
  6: 6,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 40,
  small: 60,
  medium: 80,
  large: 100,
  xlarge: 120
);

@for $var from 1 to 12 {
  @include media-min($medium) {
    .is-#{$var} {
      width: #{($var / 12) * 100%};
      margin: 0 auto;
    }
    .is-w-#{$var} {
      width: #{($var / 12) * 100%};
    }
  }
}

@each $size, $var in $spacing-size {
  .pt-#{$size} {
    padding-top: #{$var / $font-base}rem;
  }
  .pb-#{$size} {
    padding-bottom: #{$var / $font-base}rem;
  }
  .pl-#{$size} {
    padding-left: #{$var / $font-base}rem;
  }
  .pr-#{$size} {
    padding-right: #{$var / $font-base}rem;
  }
  .px-#{$size} {
    padding-left: #{$var / $font-base}rem;
    padding-right: #{$var / $font-base}rem;
  }
  .py-#{$size} {
    padding-top: #{$var / $font-base}rem;
    padding-bottom: #{$var / $font-base}rem;
  }
  .p-#{$size} {
    padding: #{$var / $font-base}rem;
  }
  .mt-#{$size} {
    margin-top: #{$var / $font-base}rem;
  }
  .-mt-#{$size} {
    margin-top: -#{$var / $font-base}rem;
  }
  .mb-#{$size} {
    margin-bottom: #{$var / $font-base}rem;
  }
  .ml-#{$size} {
    margin-left: #{$var / $font-base}rem;
  }
  .mr-#{$size} {
    margin-right: #{$var / $font-base}rem;
  }
  .mx-#{$size} {
    margin-left: #{$var / $font-base}rem;
    margin-right: #{$var / $font-base}rem;
  }
  .my-#{$size} {
    margin-top: #{$var / $font-base}rem;
    margin-bottom: #{$var / $font-base}rem;
  }
  .m-#{$size} {
    margin: #{$var / $font-base}rem;
  }

  .space-x-#{$size} > :not([hidden]) ~ :not([hidden]) {
    margin-left: #{$var/$font-base}rem;
    margin-right: 0;
  }
  .space-y-#{$size} > :not([hidden]) ~ :not([hidden]) {
    margin-top: #{$var/$font-base}rem;
    margin-bottom: 0;
  }

  .gap-#{$size} {
    gap: #{$var/$font-base}rem;
  }
}

@include media-min($large) {
  .lg\:mt-xl {
    margin-top: 3.2rem;
  }
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.is-18x18 {
  width: 18px;
  height: 18px;
}

.is-32x32 {
  width: 3.2rem;
  height: 3.2rem;
}

.is-40x40 {
  width: 4rem;
  height: 4rem;
}

.is-48x48 {
  width: 4.8rem;
  height: 4.8rem;
}

.is-60x60 {
  width: 6rem;
  height: 6rem;
}

.is-64x64 {
  width: 6.4rem;
  height: 6.4rem;
}

.is-72x72 {
  width: 7.2rem;
  height: 7.2rem;
}

.is-80x80 {
  width: 8rem;
  height: 8rem;
}

.is-112x112 {
  width: 11.2rem;
  height: 11.2rem;
}

.is-120x120 {
  width: 12rem;
  height: 12rem;
}

.is-w-4\/5 {
  width: 80%;
}

.is-w-half {
  width: 50%;
}

.md\:is-w-half {
  @include media-min($medium) {
    width: 50%;
  }
}

.is-w-full {
  width: 100%;
}

.is-h-full {
  height: 100%;
}

.is-w-100 {
  width: 10rem;
}

.is-w-192 {
  width: 19.2rem;
}

.is-w-240 {
  width: 24rem;
}

.is-w-272 {
  width: 27.2rem;
}

.is-w-320 {
  width: 32rem;
}

.is-h-30 {
  height: 3rem;
}

.is-h-32 {
  height: 3.2rem;
}

.is-h-35 {
  height: 3.5rem;
}

.is-h-40 {
  height: 4rem;
}

.is-h-48 {
  height: 4.8rem;
}

@include media-min($medium) {
  .md\:is-h-48 {
    height: 4.8rem;
  }
  .md\:is-h-60 {
    height: 6rem;
  }
  .md\:is-w-350 {
    width: 350px;
  }
}

@include media-min($large) {
  .lg\:is-h-48 {
    height: 4.8rem;
  }
}

.is-h-60 {
  height: 6rem;
}

.is-h-100 {
  height: 10rem;
}

.is-h-320 {
  height: 32rem;
}

.is-h-240 {
  height: 24rem;
}