// b5 default background color for outline buttons is transparent
// it looks weird if the container's background is not white.
.btn-outline-danger {
  background-color: #ffffff;
};

.btn-purple {
  @include button-variant($white, $cc-dark-cool-accent-mid, darken($cc-dark-cool-accent-mid, 5));
}

.btn-full-width {
  width: 100%;
}

// Separated button groups in toolbars need more space between them,
// since the buttons within the group have space between them
.btn-toolbar > .btn-group-separated:not(:first-child) {
  margin-left: 20px;
}

.btn-group-separated {
  > button, > .btn {
    // Styled similarly to .btn-default
    border-radius: 20px !important;     // force override bootstrap's per-corner styles for leftmost/rightmost buttons
    padding: 3px 15px;
    background-color: white;
    border: 1px solid $call-to-action-mid;
    color: $call-to-action-mid;
    margin-right: 5px;
    margin-bottom: 5px;

    &.active, &.active:focus, &.active:hover {
      // Styled similarly to .btn-primary
      // Don't bold font because .active often toggles on and off, and we don't want the size to change
      background-color: $call-to-action-mid;
      color: white;
    }
  }
}

.btn-outline-danger:hover {
  color: #ffffff;
}

input::file-selector-button {
  @extend .btn;
  @extend .btn-sm;
  @extend .btn-outline-primary;
}

.btn-wiggle {
  animation: attention-wiggle 0.3s ease-in-out;
  animation-iteration-count: 3;
}
