@use 'sass:map';
@use 'spruce' as *;

.colors {
  @include layout-grid('s:m', $minimum: 15rem);
}

.color-item {
  align-items: start;
  display: flex;
  gap: spacer(m);

  &--bordered &__color {
    box-shadow: 0 0 0 1px color('border') inset;
  }

  &__color {
    border-radius: config('border-radius-lg', $display);
    flex-shrink: 0;
    block-size: 3rem;
    inline-size: 3rem;
  }

  &__caption {
    display: flex;
    flex-direction: column;
    line-height: config('line-height-md', $typography);
  }

  &__name {
    color: color('heading');
    font-weight: 700;
  }

  &__value {
    font-weight: 300;
  }
}

@each $name, $value in map.get($colors, 'base') {
  .color-item--base-#{$name} .color-item__color {
    background-color: color($name, 'base');
  }
}

@each $name, $value in map.get($colors, 'selection') {
  .color-item--selection-#{$name} .color-item__color {
    background-color: color($name, 'selection');
  }
}

@each $name, $value in map.get($colors, 'alert') {
  .color-item--alert-#{$name} .color-item__color {
    background-color: color($name, 'alert');
  }
}

@each $name, $value in map.get($colors, 'btn') {
  .color-item--btn-#{$name} .color-item__color {
    background-color: color($name, 'btn');
  }
}

@each $name, $value in map.get($colors, 'form') {
  .color-item--form-#{$name} .color-item__color {
    background-color: color($name, 'form');
  }
}

@each $name, $value in map.get($colors, 'table') {
  .color-item--table-#{$name} .color-item__color {
    background-color: color($name, 'table');
  }
}

@each $name, $value in map.get($colors, 'scrollbar') {
  .color-item--scrollbar-#{$name} .color-item__color {
    background-color: color($name, 'scrollbar');
  }
}
