@import 'global';
// import color variables
// import bourbon library "tint" and "shade" functions

// use patternlab color swatches styles
.sg {
  &-colors {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border: 1px solid #ddd;
      border-radius: 8px;
      flex-basis: auto;
      margin: 0 0.5em 0.5em 0;
      max-width: 14em;
      min-width: 5em;
      padding: 0.3em;
    }

    // Align gradient matrix
    &--gradient {
      li {
        &:first-child {
          width: 14em;
        }
      }
    }
  }
  &-swatch {
    border-radius: 5px;
    display: block;
    height: 4em;
    margin-bottom: 0.3em;
  }

  &-label {
    font-size: 90%;
    line-height: 1;
  }

  &-info {
    font-size: 1rem;
    font-family: $fonts-mono;
    span {
      background-color: $c-gray-lightest;
      padding: 0.1em 0.2em;
    }
  }
}

// Programetically generate gradient colors
$tiles: 10;
@mixin ma_gradient($class, $color) {
  .#{$class} {
    &--tint {
      @for $i from 0 through $tiles {
        &:nth-child(#{$i + 1}) {
          .sg-swatch {
            background: tint($color, 10*$i);
          }
        }
      }
    }
  }
}

@mixin ma_gradient_dark($class, $color) {
  .#{$class} {
    &--shade {
      @for $i from 0 through $tiles {
        &:nth-child(#{$i + 1}) {
          .sg-swatch {
            background: shade($color, 10*$i);
          }
        }
      }
    }
  }
}

$colors: (
  "c-duckling-yellow": $c-duckling-yellow,
  "c-bay-blue": $c-bay-blue,
  "c-berkshires-green": $c-berkshires-green,
  "c-independence-cranberry": $c-independence-cranberry,
  "c-granite-gray": $c-granite-gray
);

@each $class, $c in $colors {
  @include ma_gradient($class, $c);
  @include ma_gradient_dark($class, $c);
}