// Storybook: Color Swatches

@use 'sass:math';
@use '00-config' as *;

$swatch-size: rem(150px);
$swatch-padding: 1rem;

.gesso-storybook-color__group {
  border-block-end: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  margin-block-end: $swatch-padding;
}

.gesso-storybook-color-swatch {
  border: 1px solid #c1c1c1;
  flex: 0 0 ($swatch-size + 2 * $swatch-padding);
  margin: 0 math.div($swatch-padding, 2) $swatch-padding;
  max-width: ($swatch-size + 2 * $swatch-padding);
  padding: $swatch-padding;
}

.gesso-storybook-color-swatch__indicator {
  height: $swatch-size;
  margin-block-end: $swatch-padding;
  width: $swatch-size;
}

.gesso-storybook-color-swatch__meta {
  line-height: 1.2;
}

.gesso-storybook-color-swatch__name {
  margin-block-end: rem(8px);
}

.gesso-storybook-color-swatch__hex {
  font-family:
    Menlo, Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New',
    monospace, sans-serif;
  font-size: rem(14px);
}

.gesso-storybook-color-swatch__sass-code {
  display: block;
  font-size: rem(12px);
  margin-block-start: rem(4px);
}
