$box-texture: url(3px-tile.png);
$box-bg: oklch(0.3 0.2 var(--hue));
$box-fg: oklch(0.95 0.075 var(--c-hue));

$button-bg: oklch(0.5 0.25 var(--hue));
$button-fg: oklch(0.98 0.1 var(--c-hue));


// https://oakreef.ie/transy :)
$transition-duration: 250ms;
$transition-curve: cubic-bezier(.47,.74,.61,1.2);

@mixin transy($prop: transform, $duration: $transition-duration) {
  transition: $prop $duration $transition-curve;
}

@mixin shadow {
  filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
  @media (prefers-color-scheme: dark) {
    filter: drop-shadow(6px 6px 0 oklch(0.1 0.125 var(--hue) / 0.45));
  }
}


@mixin box-base {
  @include shadow;
  // respecify font family for <button>
  font:       700 20pt var(--font);
  padding:    0.2rem 0.5rem;
  background-blend-mode: hard-light;
  border: 3px solid oklch(0.2 0.05 var(--hue));
}

@mixin button {
  @include box-base;
  background: $box-texture, $button-bg;
  color:      $button-fg;
}

@mixin box {
  @include box-base;
  background: $box-texture, $box-bg;
  color:      $box-fg;
}

@mixin image-button {
  @include button;
  padding: 5px;
  > * { display: block; }
}

@mixin nested-image-button {
  @include image-button;
  border: 2px solid $button-fg;
}

$arrowhead:
  conic-gradient(from -124deg at 100% 50%,
                 currentcolor, currentcolor 68deg, transparent 68deg);

@mixin arrow-button {
  @include button;

  &::before {
    content: '';
    display: inline-block;
    height: 1.25ex; aspect-ratio: 2/3;
    background: $arrowhead;
    margin-right: 0.5ex;
  }
}