//
// Color
// --------------------------------------------------

.color {
  width: $grid-unit-y * 20;
  font-size: $font-size-base;
  display: inline-block;
  margin-bottom: $padding-base-vertical;
  margin-right: $padding-small-horizontal;

  &-container {
    margin-bottom: $margin-base-y - $padding-base-vertical;
    margin-right: -$padding-small-horizontal;

    &:last-child {
      margin-bottom: -$padding-base-vertical;
    }
  }

  &-box {
    height: $grid-unit-y * 6;
    line-height: $grid-unit-y * 6;
    width: $grid-unit-y * 6;
    border-radius: $border-radius-base * 3;
    text-align: center;

    &-text {
      font-size: $font-size-h3;
      font-weight: $font-weight-bold;
    }
  }

  &-title {
    font-size: $font-size-small;
    margin-top: $grid-unit-y * 0.5;
    line-height: $grid-unit-y * 2;
    margin-bottom: 0;
  }

  &-variable {
    font-size: $font-size-extra-small;
    line-height: $grid-unit-y * 2;
    font-style: italic;
    margin-bottom: 0;
  }

  // Variations

  &-base {
    display: block;
  }

  &-inverse {
    .color-title {
      color: $color-white;
    }
  }

  // Variables

  @mixin color($color) {
    .color-box {
      background-color: $color;
    }
  }

  $brand-primary-map: (
    'light-5': $brand-primary-light-5,
    'light-4': $brand-primary-light-4,
    'light-3': $brand-primary-light-3,
    'light-2': $brand-primary-light-2,
    'light-1': $brand-primary-light-1,
    'dark-1': $brand-primary-dark-1,
    'dark-2': $brand-primary-dark-2
  );
  @each $name, $color in $brand-primary-map {
    &-primary {
      @include color($brand-primary);
    }

    &-primary-#{$name} {
      @include color($color);
    }
  }

  $brand-success-map: (
    'light-5': $brand-success-light-5,
    'light-4': $brand-success-light-4,
    'light-3': $brand-success-light-3,
    'light-2': $brand-success-light-2,
    'light-1': $brand-success-light-1,
    'dark-1': $brand-success-dark-1,
    'dark-2': $brand-success-dark-2
  );
  @each $name, $color in $brand-success-map {
    &-success {
      @include color($brand-success);
    }

    &-success-#{$name} {
      @include color($color);
    }
  }

  $brand-warning-map: (
    'light-5': $brand-warning-light-5,
    'light-4': $brand-warning-light-4,
    'light-3': $brand-warning-light-3,
    'light-2': $brand-warning-light-2,
    'light-1': $brand-warning-light-1,
    'dark-1': $brand-warning-dark-1,
    'dark-2': $brand-warning-dark-2
  );
  @each $name, $color in $brand-warning-map {
    &-warning {
      @include color($brand-warning);
    }

    &-warning-#{$name} {
      @include color($color);
    }
  }

  $brand-danger-map: (
    'light-5': $brand-danger-light-5,
    'light-4': $brand-danger-light-4,
    'light-3': $brand-danger-light-3,
    'light-2': $brand-danger-light-2,
    'light-1': $brand-danger-light-1,
    'dark-1': $brand-danger-dark-1,
    'dark-2': $brand-danger-dark-2
  );
  @each $name, $color in $brand-danger-map {
    &-danger {
      @include color($brand-danger);
    }

    &-danger-#{$name} {
      @include color($color);
    }
  }

  $brand-info-map: (
    'light-5': $brand-info-light-5,
    'light-4': $brand-info-light-4,
    'light-3': $brand-info-light-3,
    'light-2': $brand-info-light-2,
    'light-1': $brand-info-light-1,
    'dark-1': $brand-info-dark-1,
    'dark-2': $brand-info-dark-2
  );
  @each $name, $color in $brand-info-map {
    &-info {
      @include color($brand-info);
    }

    &-info-#{$name} {
      @include color($color);
    }
  }

  $color-bg-map: (
    'light-5': $color-bg-light-5,
    'light-4': $color-bg-light-4,
    'light-3': $color-bg-light-3,
    'light-2': $color-bg-light-2,
    'light-1': $color-bg-light-1,
    'dark-1': $color-bg-dark-1,
    'dark-2': $color-bg-dark-2
  );
  @each $name, $color in $color-bg-map {
    &-bg {
      @include color($color-bg);
    }

    &-bg-#{$name} {
      @include color($color);
    }
  }

  @mixin color-loop-rgba-white($class-name, $color) {
    &-#{$class-name} {
      @include color($color);
    }
    &-#{$class-name}-16 {
      @include color(rgba($color, 0.16));
    }
    &-#{$class-name}-24 {
      @include color(rgba($color, 0.24));
    }
    &-#{$class-name}-48 {
      @include color(rgba($color, 0.48));
    }
    &-#{$class-name}-80 {
      @include color(rgba($color, 0.8));
    }
  }
  @include color-loop-rgba-white('white', $color-white);

  @mixin color-loop-rgba-black($class-name, $color) {
    &-#{$class-name} {
      @include color($color);
    }
    &-#{$class-name}-04 {
      @include color(rgba($color, 0.04));
    }
    &-#{$class-name}-08 {
      @include color(rgba($color, 0.08));
    }
    &-#{$class-name}-16 {
      @include color(rgba($color, 0.16));
    }
    &-#{$class-name}-24 {
      @include color(rgba($color, 0.24));
    }
    &-#{$class-name}-32 {
      @include color(rgba($color, 0.32));
    }
  }
  @include color-loop-rgba-black('black', $color-black);

  @each $group-name, $group in $map-harmony-colors-grouped {
    @each $name, $color in map-get($group, colors) {
      &-#{$name} {
        .color-box {
          background-color: $color;
          color: map-get($group, 'text-color');
        }
      }
    }
  }
}