$variables: mt, mr, mb, ml, pt, pr, pb, pl;

@each $variable in $variables {
  @for $i from 0 through 10 {
    .#{$variable}-#{$i} {
      @if $variable == mt {
        margin-top: $i * 0.25rem;
      }
      @if $variable == mr {
        margin-right: $i * 0.25rem;
      }
      @if $variable == mb {
        margin-bottom: $i * 0.25rem;
      }
      @if $variable == ml {
        margin-left: $i * 0.25rem;
      }
      @if $variable == pt {
        padding-top: $i * 0.25rem;
      }
      @if $variable == pr {
        padding-right: $i * 0.25rem;
      }
      @if $variable == pb {
        padding-bottom: $i * 0.25rem;
      }
      @if $variable == pl {
        padding-left: $i * 0.25rem;
      }
    }
  }
}

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

.text-gray-500 {
  color: #a0aec0;
}
.text-xl {
  font-size: 1.25rem;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float-none {
  float: none;
}
.flex-1 {
  flex: 1 1 0%;
}
.h-auto {
  height: auto;
}
.w-10 {
  width: 2.5rem;
}
.w-2 {
  width: 0.5rem;
}
.justify-end {
  justify-content: flex-end;
}
