// Buttons
//
// Call to Action buttons come in different various flavors. 
// They work with `button`, `input` and `link` elements. 
// Check out the focus style and loading class.
// They can also be combined with different paddings classes.

.button {
  border: 0;
  padding: var(--space-s);
  position: relative;
  border-radius: var(--space-xs);
  color: var(--color-bg-6, var(--color-prime-6));
  -webkit-appearance: none; // iOs fix
  outline: none;
  background-color: var(--color-bg-1, var(--color-prime-1));
  cursor: pointer;
  &:hover {
    background-color: var(--color-bg-2, var(--color-prime-2));
    z-index: 2;
  }
  &:focus  { @extend .focus; }
  &.active { 
    &:hover {
      cursor: default;
      background-color: currentColor;
      color:            currentColor;
    }
  }
  &:hover { color: var(--color, var(--color-prime-6)) }

  &.prime {
    color: var(--color-bg-5, var(--color-prime-1));
    background-color: var(--color-bg-6, var(--color-prime-6));
    cursor: pointer;  // for HTML buttons
    &:hover {
      z-index: 2;
      background-color: var(--color-bg-7, var(--color-prime-7));
    }
    &:focus        { background-color: var(--color-accent-5); }
    &:focus:hover  { background-color: var(--color-accent-6); }
  }

  &.ghost {
    background-color: transparent;
    border: 0;
    &:hover {
      background-color: var(--color-bg-2, var(--color-prime-1));
    }
  }
}


