@mixin button-focus() {
  box-shadow: inset 0 0 0 $border-width $accent;
  background-color: $hover;
  color: $hover-fg;
}

@mixin button-hover() {
  box-shadow: inset 0 0 0 $border-width $border-color;
  background-color: $hover;
  color: $hover-fg;
}

@mixin button-active() {
  box-shadow: inset 0 0 0 $border-width $border-color;
  background-image: $active-gradient;
  background-color: $accent;
  color: $accent-fg;
}

@mixin button-disabled() {
  box-shadow: none;
  background-color: transparent;
  color: transparentize($fg-color, 0.7);
}

@mixin button($flat: false, $reactive: true, $radii: $radii, $focusable: true) {
  all: unset;
  transition: $transition;
  border-radius: $radii;
  color: $fg-color;

  @if $flat {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  } @else {
    background-color: $widget-bg;
    box-shadow: inset 0 0 0 $border-width $border-color;
  }

  @if $reactive {
    @if $focusable {
      &:focus {
        @include button-focus;
      }
    }

    &:hover {
      @include button-hover;
    }

    &:active,
    &.on,
    &.active,
    &:checked {
      @include button-active;

      &:hover {
        box-shadow:
          inset 0 0 0 $border-width $border-color,
          inset 0 0 0 99px $hover;
      }
    }
  }

  &:disabled {
    @include button-disabled;
  }
}