@use 'variables';

// Margin and Padding
@each $prop, $abbrev in (margin, m), (padding, p) {
  @each $size, $length in variables.$spacers {
    .#{$abbrev}-#{$size} {
      #{$prop}: #{$length} !important;
    }
    .#{$abbrev}t-#{$size} {
      #{$prop}-top: #{$length} !important;
    }
    .#{$abbrev}b-#{$size} {
      #{$prop}-bottom: #{$length} !important;
    }
    .#{$abbrev}l-#{$size} {
      #{$prop}-left: #{$length} !important;
    }
    .#{$abbrev}r-#{$size} {
      #{$prop}-right: #{$length} !important;
    }
    .#{$abbrev}x-#{$size} {
      #{$prop}-left: #{$length} !important;
      #{$prop}-right: #{$length} !important;
    }
    .#{$abbrev}y-#{$size} {
      #{$prop}-top: #{$length} !important;
      #{$prop}-bottom: #{$length} !important;
    }
  }
}

// Text alignment
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}

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

// Colors
.text-primary {
  color: variables.$primary-color !important;
}
.text-secondary {
  color: variables.$secondary-color !important;
}
.text-success {
  color: variables.$success-color !important;
}
.text-danger {
  color: variables.$danger-color !important;
}
.text-warning {
  color: variables.$warning-color !important;
}
.text-info {
  color: variables.$info-color !important;
}
.text-light {
  color: variables.$light-color !important;
}
.text-dark {
  color: variables.$dark-color !important;
}
.text-white {
  color: variables.$white !important;
}

.bg-primary {
  background-color: variables.$primary-color !important;
}
.bg-secondary {
  background-color: variables.$secondary-color !important;
}
.bg-success {
  background-color: variables.$success-color !important;
}
.bg-danger {
  background-color: variables.$danger-color !important;
}
.bg-warning {
  background-color: variables.$warning-color !important;
}
.bg-info {
  background-color: variables.$info-color !important;
}
.bg-light {
  background-color: variables.$light-color !important;
}
.bg-dark {
  background-color: variables.$dark-color !important;
}
.bg-white {
  background-color: variables.$white !important;
}