// Button.
.au-btn,
a.au-btn {

  // Default
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-bg);

  &:hover:not(:disabled) {
    border-color: var(--btn-bg--hover);
    background-color: var(--btn-bg--hover);
  }

  // Primary and secondary
  &.au-btn--primary {
    background-color: var(--btn-bg);
    color: var(--btn-text) !important;
    border-color: var(--btn-bg);

    &:hover:not(:disabled) {
      border-color: var(--btn-bg--hover);
      background-color: var(--btn-bg--hover);
    }
  }

  &.au-btn--secondary {
    border-color: var(--btn-bg);
    color: var(--btn-bg) !important;
    ;

    &:hover:not(:disabled) {
      border-color: var(--btn-bg--hover);
      color: var(--btn-bg--hover);
    }
  }

  // Convert tertiary button to look like a link.
  &.au-btn--tertiary {
    padding: 0;
  }

  // Large button.
  &.au-btn--large {
    font-size: 1.3em;
    font-weight: 700;
  }

  // Dark button
  &.au-btn--dark {
    &:hover:not(:disabled) {
      background-color: $button-bg-colour--dark-hover;
      border-color: $button-border-colour--dark-hover;
    }
  }

  // Override to return au-btn--block to normal for upper breakpoints
  &.au-btn--inline {
    display: inline-block;
    width: auto;
  }

}