$white-light: scale-color($white, $lightness: -40%);
$aluminum-light: scale-color($aluminum, $lightness: 20%);

$color-list-box-size: rem-calc(150);

@mixin color-list-box($bg) {
  background-color: $bg;

  // This find the lightness percentage of the background color.
  $bg-lightness: lightness($bg);

  @if $bg-lightness > 70% {
    color: $oil;
    text-shadow: 0px 2px rgba($white,0.4);
  }
  @else {
    color: $white;
    text-shadow: 0px 2px rgba($oil,0.4);
  }
}


.color-list {

  div {
    width: $color-list-box-size;
    height: $color-list-box-size;
    border: 5px solid $white;
    text-align: center;
    padding: rem-calc(10);
    padding-top: rem-calc(15);

    &.primary {
      @include color-list-box($primary-color);
    }
    &.secondary {
      @include color-list-box($secondary-color);
    }
    &.alert {
      @include color-list-box($alert-color);
    }
    &.success {
      @include color-list-box($success-color);
    }
    &.warning {
      @include color-list-box($warning-color);
    }
    &.info {
      @include color-list-box($info-color);
    }
    &.body-bg {
      @include color-list-box($body-bg);
    }
    &.body-font {
      @include color-list-box($body-font-color);
    }
    &.header-font {
      @include color-list-box($header-font-color);
    }
    &.subheader-font {
      @include color-list-box($subheader-font-color);
    }
    &.blockquote-font {
      @include color-list-box($blockquote-font-color);
    }
  }
}
