@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/abstracts' as *;

/* Color swatches for Identity/Color page
   ========================================================================== */

.swatches-container--primary {
  @include u-grid-nested-col-group;
}

.swatches--primary {
  @include u-grid-column(9.4);
}

.swatch {
  margin-left: 0;

  &__field {
    height: 5em;
  }

  &--primary &__field {
    height: 10em;
  }

  &__head {
    margin: 0.25em 0;
  }

  &__table {
    width: 100%;
  }

  td,
  th {
    padding: 0;
    vertical-align: top;
    background: transparent !important;
  }
  th {
    padding-right: 0.25em;
    font-weight: 600;
    text-align: left;
  }

  &__field--green {
    background: var(--green);
  }
}

/* Make swatch tables multi column at appropriate widths */

/* Small tablet (600px) */
@media only screen and (min-width: 37.5em) {
  .swatches {
    @include u-grid-nested-col-group;
  }
  .swatch {
    @include u-grid-column(6);

    th {
      width: math.div(70px, $base-font-size-px) + em;
    }
  }
}

/* Landscape tablet/netbook/laptop (1024px) */
@media only screen and (min-width: 64em) {
  .swatch--secondary {
    @include u-grid-column(3);
  }

  .swatch--primary {
    @include u-grid-column(4);
  }
}

// prettier-ignore
$colors: 'beige',
         'beige-30',
         'beige-60',
         'green-dark',
         'green-mid-dark',
         'green',
         'green-90',
         'green-80',
         'green-70',
         'green-60',
         'green-50',
         'green-40',
         'green-30',
         'green-20',
         'green-10',
         'teal-dark',
         'teal-mid-dark',
         'teal',
         'teal-90',
         'teal-80',
         'teal-70',
         'teal-60',
         'teal-50',
         'teal-40',
         'teal-30',
         'teal-20',
         'teal-10',
         'pacific-dark',
         'pacific-mid-dark',
         'pacific',
         'pacific-90',
         'pacific-80',
         'pacific-70',
         'pacific-60',
         'pacific-50',
         'pacific-40',
         'pacific-30',
         'pacific-20',
         'pacific-10',
         'navy-dark',
         'navy-mid-dark',
         'navy',
         'navy-90',
         'navy-80',
         'navy-70',
         'navy-60',
         'navy-50',
         'navy-40',
         'navy-30',
         'navy-20',
         'navy-10',
         'purple-dark',
         'purple-mid-dark',
         'purple',
         'purple-90',
         'purple-80',
         'purple-70',
         'purple-60',
         'purple-50',
         'purple-40',
         'purple-30',
         'purple-20',
         'purple-10',
         'red-dark',
         'red-mid-dark',
         'red',
         'red-90',
         'red-80',
         'red-70',
         'red-60',
         'red-50',
         'red-40',
         'red-30',
         'red-20',
         'red-10',
         'gold-dark',
         'gold-mid-dark',
         'gold',
         'gold-90',
         'gold-80',
         'gold-70',
         'gold-60',
         'gold-50',
         'gold-40',
         'gold-30',
         'gold-20',
         'gold-10',
         'neutral-dark',
         'neutral-mid-dark',
         'neutral',
         'neutral-90',
         'neutral-80',
         'neutral-70',
         'neutral-60',
         'neutral-50',
         'neutral-40',
         'neutral-30',
         'neutral-20',
         'neutral-10',
         'gray-darker',
         'gray-dark',
         'gray-mid-dark',
         'gray',
         'gray-90',
         'gray-80',
         'gray-70',
         'gray-60',
         'gray-50',
         'gray-40',
         'gray-30',
         'gray-20',
         'gray-15',
         'gray-10',
         'gray-5',
         'black',
         'white';

// Set up looping mixin
@each $color in $colors {
  // Output the `.swatch__field--color` rule
  .swatch__field--#{$color} {
    /* prettier-ignore */
    background: var(--#{$color});
  }
}

.color-table {
  width: 100%;
  margin-bottom: math.div(45px, $base-font-size-px) + em;

  .swatch__field {
    width: 30%;
    height: 2.5em;
  }

  td:not(:first-of-type) {
    white-space: nowrap;
  }
}
