/* == Styles shared by all buttons == */

[type=button],
[type=reset],
[type=submit],
// Button with no type attribute defaults to "submit"
button:not([type]) {
  @include gravy-font(primary, bold);
  padding: $grav-sp-inset-squished-xs;
  cursor: pointer;

  // Scale icons in buttons to match the line-height
  > .grav-c-icon {
    width: auto;
    height: 1em * $grav-line-height;
    margin-right: $grav-sp-xs;
    vertical-align: top;
  }
}

/* == Styles for specific kinds of buttons == */

@mixin grav-button-styles($interactive, $contrast, $hover, $isToggle: false) {
  border: $grav-st-thickness $grav-st-style $interactive;
  background-color: $interactive;
  color: $contrast;

  &:hover {
    background-color: $hover;
    border-color: $hover;
  }

  &:active {
    background-color: $contrast;
    border-color: unset;
    color: $interactive;
  }

  @if $isToggle {
    &[aria-pressed=true] {
      // Same styles as :active
      background-color: $contrast;
      border-color: unset;
      color: $interactive;
    }
  }

  &:disabled {
    &,
    &:hover {
      background-color: $grav-co-disabled;
      border-color: $grav-co-disabled;
      color: $grav-co-disabled-contrast;
      cursor: auto;
    }
  }
}

[type=button] {
  @include grav-button-styles($grav-co-interactive-secondary, $grav-co-interactive-secondary-contrast, $grav-co-interactive-secondary-hover, true);
}

[type=reset] {
  @include grav-button-styles($grav-co-interactive-secondary, $grav-co-interactive-secondary-contrast, $grav-co-interactive-secondary-hover);
}

[type=submit],
button:not([type]) {
  @include grav-button-styles($grav-co-interactive-primary, $grav-co-interactive-primary-contrast, $grav-co-interactive-primary-hover);
}