// text colors
@each $name, $colors in $color-map {
  .color-#{$name}-lighter {
    color: nth($colors, 1);
  }

  .color-#{$name}-light {
    color: nth($colors, 2);
  }

  .color-#{$name} {
    color: nth($colors, 3);
  }

  .color-#{$name}-dark {
    color: nth($colors, 4);
  }

  .color-#{$name}-darker {
    color: nth($colors, 5);
  }
}

.color-white {
  color: $color-white;
}

.color-white-dark {
  color: $color-white-dark;
}

.color-white-darker {
  color: $color-white-darker;
}

.color-black-lighter {
  color: $color-black-lighter;
}

.color-black-light {
  color: $color-black-light;
}

.color-black {
  color: $color-black;
}

// backgrounds
@each $name, $colors in $color-map {
  .bg-#{$name}-lighter {
    background-color: nth($colors, 1);
  }

  .bg-#{$name}-light {
    background-color: nth($colors, 2);
  }

  .bg-#{$name} {
    background-color: nth($colors, 3);
  }

  .bg-#{$name}-dark {
    background-color: nth($colors, 4);
  }

  .bg-#{$name}-darker {
    background-color: nth($colors, 5);
  }
}

.bg-white {
  background-color: $color-white;
}

.bg-white-dark {
  background-color: $color-white-dark;
}

.bg-white-darker {
  background-color: $color-white-darker;
}

.bg-black-lighter {
  background-color: $color-black-lighter;
}

.bg-black-light {
  background-color: $color-black-light;
}

.bg-black {
  background-color: $color-black;
}

// align
.content-left {
  display: flex;
  justify-content: flex-start;
}

.content-center {
  display: flex;
  justify-content: center;
}

.content-right {
  display: flex;
  justify-content: flex-end;
}

.content-top {
  display: flex;
  align-items: flex-start;
}

.content-middle {
  display: flex;
  align-items: center;
}

.content-bottom {
  display: flex;
  align-items: flex-end;
}

// other
.box-shadow {
  box-shadow: 0 3px 7px rgba(0, 0, 0, .2);
}

.horizontal-divider {
  border-top: 1px solid rgba($color-black, 0.2);
  border-bottom: 1px solid rgba($color-white, 0.05);
  margin-top: 5px;
  margin-bottom: 5px;
}

.vertical-divider {
  border-left: 1px solid rgba($color-black, 0.2);
  border-right: 1px solid rgba($color-white, 0.05);
}