@use "sass:meta";
@use './variables' as *;
@use './mixins' as *;
@use './variables/clr' as clr;

$indents: 0 4 6 8 10 12 16 18 20 21 22 24 25 26 27 28 32 40 47 50 56;

@each $i in $indents {
  .m-#{$i} {
    margin: #{$i}px;
  }

  .mx-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }

  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }

  .mt-#{$i} {
    margin-top: #{$i}px;
  }

  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }

  .ml-#{$i} {
    margin-left: #{$i}px;
  }

  .mr-#{$i} {
    margin-right: #{$i}px;
  }

  .p-#{$i} {
    padding: #{$i}px;
  }

  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }

  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }

  .pt-#{$i} {
    padding-top: #{$i}px;
  }

  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }

  .pl-#{$i} {
    padding-left: #{$i}px;
  }

  .pr-#{$i} {
    padding-right: #{$i}px;
  }
}

.ml-a {
  margin-left: auto;
}

.mr-a {
  margin-left: auto;
}

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

@each $align in ('left', 'right', 'center') {
  .text-align-#{$align} {
    text-align: #{$align};
  }
}

@each $name, $value in meta.module-variables('clr') {
  .text-#{$name} {
    color: #{$value};
  }

  .bg-#{$name} {
    background-color: #{$value};
  }
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

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

.flex-nowrap {
  flex-wrap: nowrap !important;
}

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

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-items-start {
  justify-items: flex-start !important;
}

.justify-items-end {
  justify-items: flex-end !important;
}

.justify-items-center {
  justify-items: center !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}