/* buttons */

/* button mixin */
@define-mixin button {
  /* remove default browser appearance */
  @mixin is-controlled;

  /* prevent button text from being selected */
  @mixin is-unselectable;

  display: inline-block;
  width: auto;
  margin: 0;
  padding: var(--hiq-button-vertical-padding) var(--hiq-button-horizontal-padding);
  border: var(--hiq-button-border-width) solid var(--hiq-button-border-color);
  border-radius: var(--hiq-button-border-radius);
  background-color: var(--hiq-button-background-color);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--hiq-button-font-weight);
  line-height: inherit;
  text-align: center;
  text-decoration: none;
  color: var(--hiq-button-text-color);
  transition: border-color var(--hiq-speed) var(--hiq-easing), color var(--hiq-speed) var(--hiq-easing), background-color var(--hiq-speed) var(--hiq-easing);
  cursor: pointer;

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

  &:focus,
  &:active {
    outline: var(--hiq-outline-color) solid var(--hiq-outline-width);
  }

  &:active {
    border-color: var(--hiq-button-active-border-color);
    background-color: var(--hiq-button-active-background-color);
    color: var(--hiq-button-active-text-color);
  }

  /* force styling of text color if element has visited state (needed for `a` elements) */
  &:visited {
    color: var(--hiq-button-text-color);
  }

  &:disabled,
  &[aria-disabled] {
    border-color: var(--hiq-disabled-border-color);
    background-color: var(--hiq-disabled-background-color);
    color: var(--hiq-disabled-text-color);
    cursor: not-allowed;
  }
}

/*
apply mixin to:
1. `button` elements
2. elements with `.button` class (can be an `a` element)
3. elements with certain `type` attributes
*/
@custom-selector :--button
  button,
  [role='button'],
  [type='button'],
  [type='submit'],
  [type='reset'],
  .button,
  .btn;

:--button {
  @mixin button;
}

/* styling file input button like a button */
::-webkit-file-upload-button {
  @mixin button;
}

/* future-proof disabling of clicks on `<a>` elements */
fieldset[disabled] [role='button'] {
  pointer-events: none;
}

/* Small button */
.btn-sm {
  padding: var(--hiq-button-small-vertical-padding) var(--hiq-button-small-horizontal-padding);
  font-size: var(--hiq-font-size-small);
}

.btn-link {
  /* remove default browser appearance */
  @mixin is-controlled;

  /* prevent button text from being selected */
  @mixin is-unselectable;

  display: inline-block;
  width: auto;
  margin: 0;
  padding: var(--hiq-button-vertical-padding) var(--hiq-button-horizontal-padding);
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--hiq-button-font-weight);
  line-height: inherit;
  text-align: center;
  text-decoration: none;
  color: var(--hiq-link-color);
  transition: border-color var(--hiq-speed) var(--hiq-easing), color var(--hiq-speed) var(--hiq-easing), background-color var(--hiq-speed) var(--hiq-easing);
  cursor: pointer;

  &:hover,
  &:focus {
    color: var(--hiq-link-hover-color);
    background-color: transparent;
  }

  &:focus,
  &:active {
    outline: none;
  }

  &:active {
    border-color: none;
    background-color: transparent;
    color: var(--hiq-link-hover-color);
  }

  /* force styling of text color if element has visited state (needed for `a` elements) */
  &:visited {
    color: var(--hiq-link-hover-color);
  }

  &:disabled,
  &[aria-disabled] {
    border-color: transparent;
    background-color: transparent;
    color: var(--hiq-disabled-text-color);
    cursor: not-allowed;
  }
}
