@use 'sass:color';

$button-primary-background: #07f;
$button-primary-color: #fff;
$default-border: solid 1px #ccc;
$font-family-default: 'Averia Serif Libre', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
$font-family-data: 'Funnel Sans', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
$popover-border: $default-border;
$popover-shadow: 0 0.5rem 0.5rem #3333;

@mixin reset-button {
  appearance: none;
  background: none;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

@mixin button-base {
  @include reset-button;
  @include rounded;
  font-family: $font-family-default;
  padding: 0.5rem 1rem;
  transition: background 0.2s ease;
}

@mixin button-primary {
  @include button-base;
  background: $button-primary-background;
  color: $button-primary-color;

  &:hover {
    background: color.scale($button-primary-background, $lightness: -10%, $space: oklch);
  }
}

@mixin button-clear {
  @include button-base;

  &:hover {
    background: #0002;
  }
}

@mixin rounded-sm {
  border-radius: 0.25rem;
}

@mixin rounded {
  border-radius: 0.5rem;
}