@use "sass:color";
@use "sass:math";
@use "sass_sample_theme" as theme;

$gap: 8px;

.button {
  padding: $gap ($gap * 2);
  border-radius: theme.$radius;
  background: theme.$brand;
  color: white;

  &:hover {
    background: color.adjust(theme.$brand, $lightness: -8%);
  }

  @each $name, $tone in (danger: #c62828, muted: #9e9e9e) {
    &--#{$name} {
      background: $tone;
    }
  }
}

.grid {
  display: grid;
  gap: $gap;
  grid-template-columns: repeat(2, 1fr);

  @include theme.above(md) {
    grid-template-columns: repeat(4, 1fr);
    gap: math.div($gap * 3, 2);
  }
}