@import 'variables';

$button-margin: $default-margin;
$button-height: 2.5rem;

button,
input[type=button] {
  height: $button-height;
  border-radius: $default-border-radius;
  margin: $button-margin;
  color: var(--color-ui-1);
  background: var(--color-ui-2-50);
  border: none;
  box-sizing: border-box;
  line-height: $button-height;
  letter-spacing: 0;
  font-size: var(--font-size-base);
  font-weight: $font-weight-bold;
  text-transform: uppercase;
  padding: 0 $default-padding;
  @include ignore-device-rendering();
  cursor: pointer;
}

button.primary,
input[type=button].primary {
  background-color: var(--color-brand-light);
}

button.aux,
input[type=button].aux {
  background-color: transparent;
}

button:focus,
input[type=button]:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem var(--color-focus-80);
}

/*
  Hover
 */
button:enabled:hover,
input[type="button"]:enabled:hover {
  box-shadow: 0 $default-border-width-thin $default-border-width*2 0rem var(--color-shadow-30);
  outline: none;
}

button.aux:enabled:hover,
input[type="button"].aux:enabled:hover {
  background: var(--color-ui-3-80);
  box-shadow: 0 0 0 $default-border-width-thin var(--color-ui-3);
  outline: none;
}

/*
  Active
 */

button:enabled:active, input[type=button]:enabled:active,
button.aux:enabled:active, input[type=button].aux:enabled:active {
  color: var(--color-ui-80);
  background-color: var(--color-ui-1-30);
  box-shadow: none;
  border: none;
  outline: none;
}

/*
  Disabled
 */
button:disabled,
input[type=button]:disabled {
  background-color: var(--color-ui-3-50);
  color: var(--color-ui-1-50);
}

button.primary:disabled,
input[type=button].primary:disabled {
  background-color: var(--color-brand-light-50);
}