// 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 {
  padding: var(--space-s);
  position: relative;
  border-style: solid;
  @include emboss();

  &:focus  { @extend .focusstyle; }
  &:hover, &:focus { z-index: 2 }
  &.active { 
      &:hover {
        cursor: default;
        background-color: currentColor;
        color:            currentColor;
      }
  }
  &:hover, &:focus { color: var(--color, var(--color-main-5)) }
}
.prime {
  border-width: var(--space-px);
  border-color: var(--color, var(--color-main-5));
  color: var(--color-bg-1, var(--color-prime-1));
  background-color: var(--color-bg-4, var(--color-prime-4));
  cursor: pointer;  // for HTML buttons
  &:hover, &:focus {
    z-index: 2;
    color: var(--color-bg-1, var(--color-prime-1));
    background-color: var(--color-bg-5, var(--color-prime-5));
  }
}
.ghost {
  background-color: transparent;
  color: var(--color-bg-4, var(--color-prime-4));
  background-image: none !important;
  &:hover {
    background-color: var(--color-bg-2, var(--color-prime-2));
  }
}