@use 'sass:color';

$button-primary-background: #07f;
$button-primary-color: #fff;
$default-border-color: #ccc;
$default-border: solid 1px $default-border-color;
$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;
$font-family-mono: Menlo, 'Courier New', Courier, mono;
$popover-border: $default-border;
$popover-shadow: 0 0.5rem 0.5rem #3333;
$border-radius-rounded-sm: 0.25rem;
$border-radius-rounded: 0.5rem;
$link-color: #069;
$notice-color-info: #39d;
$hover-lightness-scale-factor: -10%;

@mixin reset-button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  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: $hover-lightness-scale-factor,
      $space: oklch
    );
  }
}

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

  background: $button-primary-color;
  border: solid 1px $button-primary-background;
  color: $button-primary-background;

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

@mixin button-secondary {
  @include button-base;
  background: #fff;
  color: #000;
  border: $default-border;

  &:hover {
    border-color: color.scale(
      $default-border-color,
      $lightness: $hover-lightness-scale-factor,
      $space: oklch
    );
  }
}

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

  &:hover {
    background: #0000001f;
  }
}

@mixin reset-input {
  appearance: none;
  background: none;
  border: none;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  outline: none;
}

@mixin rounded-sm {
  border-radius: $border-radius-rounded-sm;
}

@mixin rounded {
  border-radius: $border-radius-rounded;
}

@mixin popover {
  @include rounded;
  inset: unset;
  border: $popover-border;
  margin: 0;
  margin-top: 0.25rem;
  position: relative;
  display: block;
  background: #fff;
  box-shadow: $popover-shadow;
}