@import "../variables";

.cr-pattern-library {
  background-color: $body-bg;
}

/**
 * Swatch component.
 */
.cr-pattern-library-swatch {
  .cr-pattern-library-swatch__colour {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    border-radius: 50px;
    line-height: 100px;
    color: $WHITE;
  }

  code {
    display: inline-block;
    clear: both;
    margin-bottom: 2px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &.cr-pattern-library-swatch--primary .cr-pattern-library-swatch__colour {
    background-color: $brand-primary;
  }

  &.cr-pattern-library-swatch--secondary .cr-pattern-library-swatch__colour {
    background-color: $brand-secondary;
  }

  &.cr-pattern-library-swatch--tertiary .cr-pattern-library-swatch__colour {
    background-color: $brand-tertiary;
  }

  &.cr-pattern-library-swatch--gray-light .cr-pattern-library-swatch__colour {
    background-color: $brand-gray-light;
  }

  &.cr-pattern-library-swatch--gray-medium .cr-pattern-library-swatch__colour {
    background-color: $brand-gray-medium;
  }

  &.cr-pattern-library-swatch--gray-dark .cr-pattern-library-swatch__colour {
    background-color: $brand-gray-dark;
  }
}

.cr-pattern-library-icon-grid {
  .cr-i {
    @extend .cr-i--fw;
  }

  > div {
    min-height: 25px;
    margin: 5px 0;
  }
}