/*
      Buttons
-------------------------------
*/

@button default {
  button-border-width: 0;
  button-color: var(--color-bg);
  button-background: var(--color-highlight) var(--color-inverse)
    var(--color-inverse);
  button-class: active disabled true;
}

.btn {
  button: default;
}

.btn-border {
  button-color: var(--color-bg) var(--color-bg) var(--color-bg);
  button-background: var(--color-highlight) var(--color-inverse)
    var(--color-inverse);
  button-class: active disabled;
}

.btn-alt {
  button-color: var(--color-text) var(--color-bg) var(--color-bg);
  button-background: var(--color-bg) var(--color-neutral) var(--color-highlight);
  button-class: active disabled true;
}

.btn-flash {
  button-color: var(--color-bg) var(--color-bg) var(--color-bg);
  button-background: var(--color-neutral) var(--color-neutral)
    var(--color-highlight);
  button-class: active disabled true;
}

.btn-menu {
  button-color: var(--color-text) var(--color-highlight) var(--color-highlight);
  button-background: var(--color-transparent) var(--color-transparent)
    var(--color-transparent);
  button-class: active disabled true;
}

.btn,
.btn-alt,
.btn-border,
.btn-menu,
.btn-flash {
  transition: var(--transition);
  font-weight: 700;
}

.btn-icon {
  line-height: 1rem;
}