$color: (name: "primary", color: $color-primary),
(name: "success", color: $color-success),
(name: "warning", color: $color-warning),
(name: "danger", color: $color-danger),
(name: "info", color: $color-info);

@for $i from 1 through length($color) {
  $item: nth($color, $i);
  $name: map-get($item, name);
  .color-#{$name} {
    color: map-get($item, color);

    &:hover, &.hover, &:active, &.active {
      color: map-get($item, color) !important;
    }
  }
  .color-bg-#{$name} {
    background-color: map-get($item, color)!important;
  }
  .color-border-#{$name} {
    border-color: map-get($item, color);
  }
}

$text-color: (name: "primary", color: $color-text-primary),
(name: "regular", color: $color-text-regular),
(name: "secondary", color: $color-text-secondary);

@for $i from 1 through length($text-color) {
  $item: nth($text-color, $i);
  $name: map-get($item, name);
  .text-#{$name} {
    color: map-get($item, color);
  }
}

$border-color: (name: "base", color: $color-border-base),
(name: "extralight", color: $color-border-extralight),
(name: "light", color: $color-border-light),
(name: "lighter", color: $color-border-lighter);

@for $i from 1 through length($border-color) {
  $item: nth($border-color, $i);
  $name: map-get($item, name);
  .border-l-#{$name} {
    border-left: 1px solid map-get($item, color) !important;
  }

  .border-t-#{$name} {
    border-top: 1px solid map-get($item, color) !important;
  }

  .border-r-#{$name} {
    border-right: 1px solid map-get($item, color) !important;
  }

  .border-b-#{$name} {
    border-bottom: 1px solid map-get($item, color) !important;
  }

  .border-#{$name} {
    border: 1px solid map-get($item, color) !important;
  }

}