/* buttons */

/* button mixin */
@define-mixin button {
  /* scoped properties */
  --button-height: var(--hiq-button-height, 2.25rem);
  --button-vertical-padding: var(--hiq-button-vertical-padding, 0);
  --button-horizontal-padding: var(--hiq-button-horizontal-padding, 1rem);
  --button-border-width: var(--hiq-button-border-width, 1px);
  --button-border-color: var(--hiq-button-border-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
  --button-border-radius: var(--hiq-button-border-radius, var(--hiq-border-radius, 0.2rem));
  --button-background-color: var(--hiq-button-background-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
  --button-font-weight: var(--hiq-button-font-weight, var(--hiq-font-weight-medium, 500));
  --button-text-color: var(--hiq-button-text-color, white);
  --button-hover-border-color: var(--hiq-button-hover-border-color, hsl(210, 100%, 40%));
  --button-hover-background-color: var(--hiq-button-hover-background-color, hsl(210, 100%, 40%));
  --button-hover-text-color: var(--hiq-button-hover-text-color, white);
  --button-focus-border-color: var(--hiq-button-focus-border-color, var(--hiq-button-hover-border-color, hsl(210, 100%, 40%)));
  --button-focus-background-color: var(--hiq-button-focus-background-color, var(--hiq-button-hover-background-color, hsl(210, 100%, 40%)));
  --button-focus-text-color: var(--hiq-button-focus-text-color, var(--hiq-button-hover-text-color, white));
  --button-active-border-color: var(--hiq-button-active-border-color, hsl(210, 100%, 30%));
  --button-active-background-color: var(--hiq-button-active-background-color, hsl(210, 100%, 30%));
  --button-active-text-color: var(--hiq-button-active-text-color, white);

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

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

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

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

  &:focus,
  &:active {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem);
  }

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

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

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

  &:disabled,
  &[aria-disabled] {
    border-color: var(--hiq-disabled-border-color, transparent);
    background-color: var(--hiq-disabled-background-color, var(--hiq-color-gray-7, hsl(220, 10%, 95%)));
    color: var(--hiq-disabled-text-color, var(--hiq-color-gray-5, hsl(220, 10%, 60%)));
    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;

:--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;
}