// ========================================================
// Button Classes
// ========================================================

// Bootstrap uses cursor auto for buttons+anchors. Which means for some browsers
// these elements aren't pointers... which is weird and silly.
.btn, .pointer, a, button {
  cursor: pointer !important;
}

// TODO: When do we use this? Looks like for dropdowns, anything else?
.btn-toggle {
  @include button-variant($white, $input-border-color, $white, map-get($theme-colors, primary));
  color: map-get($theme-colors, primary);
  &:hover {
    color: map-get($theme-colors, primary);
  }
}

// TODO: is this preferred over using existing `text-*` classes to override color?
// TODO: When do we use this vs. an outline button? Is there a way we can simplify this?
.btn-link.btn-success { color: map-get($theme-colors, success); }
.btn-link.btn-secondary { color: map-get($theme-colors, secondary); }
.btn-link.btn-info { color: map-get($theme-colors, info); }
.btn-link.btn-warning { color: map-get($theme-colors, warning); }
.btn-link.btn-danger { color: map-get($theme-colors, danger); }

// TODO: Are we still doing this? I think we switched to using text decoration b/c
// border bottom style breaks when links wrap onto multiple lines.
.link-dashed {
  color: $link-color;
  text-decoration: none;
  border-bottom: 1px dashed $link-color;

  @include hover-focus {
    cursor: pointer;
    color: $link-hover-color;
    text-decoration: none;
    border-bottom: 1px dashed $link-hover-color;
  }
}

// DEPRECATED
// ---------------------------------------------------------------------------

// DEPRECATED: Use `btn-anchor` for better semantics
.btn-unstyled {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border-color: transparent;
  font-size: 1em;
  appearance: none;
  vertical-align: inherit;
  text-align: left;
  &:active,
  &:hover,
  &:focus {
    background-color: transparent;
    box-shadow: none;
  }
}