// Button
//
// In addition to the default styling of `<button>` and
// `<input type="submit|image|reset|button">` elements, the `.button` class and
// its variants can apply buttons styles to various elements (like an `<a>`
// link).
//
// :hover  - Hover styling.
// :active - Depressed button styling.

.button,
%button,
button,
[type='button'],
[type='reset'],
[type='submit'] {
  @extend %button--disabled;
  // Some styles don't apply to <a> links since they are inline elements by default.
  display: inline-block;
  font-family: var(--ff-headings);
  text-decoration: none;
  text-align: center;
  width: fit-content;
  margin-right: 1rem;
  margin-bottom: 1rem;
  padding: .2rem 1rem;
  // Improve usability and consistency of cursor style between image-type `input` and others.
  cursor: pointer;
  color: var(--color-button-text);
  background-color: var(--color-button);
  border: 1px solid var(--color-button);
  border-radius: var(--radius-s);

  &:hover,
  &:focus-visible,
  &:active {
    // Override any link underlines and color changes.
    text-decoration: none;
    color: var(--color-button-text-hover);
    background-color: var(--color-button-hover);
  }
}

// Add button variations here.
.button,
%button {
  &--small {
    font-size: var(--fs-xs);
    margin-right: .5rem;
    margin-bottom: .5rem;
    padding: .2rem .75rem;
  }

  &--alt {
    color: var(--color-button-text-hover);
    background-color: var(--color-button-hover);

    &:hover,
    &:focus-visible,
    &:active {
      color: var(--color-button-text);
      background-color: var(--color-button);
    }
  }

  &--outline {
    color: var(--color-button);
    background-color: var(--color-button-text);
    border-color: var(--color-button);

    &:hover,
    &:focus-visible,
    &:active {
      color: var(--color-button-text);
      background-color: var(--color-button);
    }
  }

  &--shadow {
    &:hover {
      box-shadow: 2px 2px 5px 1px var(--color-button-hover);
    }

    &:active {
      box-shadow: inset 2px 2px 5px 1px var(--color-button);
    }
  }
}

// The disabled variation should always go last, so that it overrides any
// other variations.
%button--disabled[disabled] {
  @extend %disabled;
  background-color: var(--color-grey-extra-light);
  border: 1px solid var(--color-button-disabled);
  background-image: none;
  text-shadow: none;
}