$button-colors: "secondary", "blue";

@mixin buttonInverse() {
  --button-background: transparent;
  --button-color: var(--color-inverse);
  --button-hover-background-color: #{rgba(white, 0.16)};
  --button-hover-color: currentColor;
  --button-focus-outer: currentColor;
}

.button {
  --button-background: var(--color-primary);
  --button-color: var(--color-on-primary);
  --outline-color: transparent;

  // Display
  display: inline-flex;
  align-items: center;
  justify-content: center;

  // Size
  min-width: 10ch;

  // Reset for buttons
  padding: 0.55em 0.75em 0.5em;
  gap: 0.5em;

  // Effects
  transition: none 180ms ease-in-out;
  transition-property: background-color, color, border-color;
  border: 2px solid transparent;

  // Visual
  border-radius: 0.5em;
  background-color: var(--button-background);
  color: var(--button-color);
  font-family: var(--brand-font-alt);
  font-weight: var(--brand-font-alt-weight-bold);
  line-height: calc(2px + 2ex + 2px);

  // Text
  text-align: center;

  // Reset for links
  text-decoration: none;
  cursor: pointer;

  &:focus {
    box-shadow: 0 0 0 max(0.15em, 2px)
        var(--button-focus-inner, var(--button-color)),
      0 0 0 max(0.3em, 2px) var(--button-focus-outer, var(--button-background));
  }

  &:hover,
  &:active {
    background-color: var(--button-hover-background-color, var(--button-color));
    color: var(--button-hover-color, var(--button-background));

    &:not(.button-outlined) {
      border-color: var(--button-hover-border-color, currentColor);
    }
  }

  @each $color in $button-colors {
    &--#{$color} {
      --button-background: var(--color-#{$color});
      --button-color: var(--color-on-#{$color});
    }
  }

  &-outlined {
    --button-background: transparent;
    --button-color: var(--color-blue);
    --button-hover-color: var(--color-on-blue);
    --button-focus-inner: var(--color-background);
    --button-focus-outer: var(--color-blue);

    border-color: var(--button-color);

    &--inverse {
      @include buttonInverse();
    }
  }

  &__icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
  }

  &-icon {
    @include buttonInverse();

    width: 1.75em;
    min-width: unset;
    height: 1.75em;
    padding: 0.15em;
    border-radius: 50%;
  }

  &--small {
    font-size: 1rem;
  }
}
