.btn {
  --border-radius: 4px;
  --border-color: var(--light-gray);
  --button-padding: 0.25rem 0.75rem;

  align-items: center;
  background-color: inherit;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--gray-900);
  cursor: pointer;
  display: inline-flex;
  gap: 0.25rem;
  justify-content: center;
  min-height: 2.125rem;
  white-space: nowrap;
  padding: var(--button-padding);
  text-decoration: none;

  &:hover:not([aria-disabled="true"]) {
    background-color: var(--light-blue);
    text-decoration: none;
  }
}

.btn.btn-sm {
  font-size: 0.75rem;
  min-height: 1.75rem;
}

.btn.btn-xs {
  font-size: 0.75rem;
  min-height: 1.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.btn.btn-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.btn.btn-simple {
  border: none !important;
}

.btn.btn-primary {
  border-color: var(--custom-accent-color, var(--scampi-700));
  color: var(--custom-accent-color-contrast, white);

  &:not([aria-disabled="true"]) {
    background-color: var(--custom-accent-color, var(--scampi-700));
  }

  &:hover:not([aria-disabled="true"]) {
    background-color: var(--scampi-800);
  }
}

.btn.btn-success {
  border-color: var(--success-color);
  color: var(--success-text);

  &:not([aria-disabled="true"]) {
    background-color: var(--success-color);
  }

  &:hover:not([aria-disabled="true"]) {
    background-color: var(--success-color-hover);
    border-color: var(--success-color-hover);
  }
}

.btn.btn-danger {
  border-color: var(--danger-color);
  color: var(--danger-text);

  &:not([aria-disabled="true"]) {
    background-color: var(--danger-color);
  }

  &:hover {
    background-color: var(--danger-color-hover);
  }
}

.btn.btn-toggle-test-mode {
  background-color: white;
  color: var(--orange-800);
  border-color: var(--orange-800);

  &:hover {
    background-color: var(--orange-100);
  }
}

.btn.btn-link {
  border-color: rgb(0 0 0 / 0%);
  color: var(--custom-accent-color, var(--scampi-700));
}

.btn.btn-link:hover,
.btn.btn-link:active,
.btn.btn-link:focus {
  background-color: rgb(0 0 0 / 0%);
  text-decoration: underline;
}

.btn.btn-secondary {
  border-color: var(--medium-gray);
  color: black;
  background-color: white;

  &:hover {
    background-color: var(--light-gray);
  }
}

.btn.btn-toggle {
  border-color: var(--medium-gray);
  color: black;
  background-color: white;

  &:hover,
  &.on {
    background-color: var(--light-gray);
  }

  &.on:hover {
    background-color: var(--medium-gray);
  }
}

.btn.btn-default {
  border-color: var(--medium-gray);
  color: black;
  background-color: var(--light-gray);

  &:hover {
    background-color: white;
  }
}

.btn-close {
  align-items: center;
  border-radius: 4px;
  color: var(--gray-900);
  display: flex;
  justify-content: center;
  min-height: 2.125rem;
  min-width: 2.125rem;
  text-align: center;
  text-decoration: none;

  &:hover {
    background-color: var(--light-blue);
  }
}

.btn-not-clickable {
  &:hover {
    background-color: #fff;
    cursor: default;
  }
}

.btn.with-padding-x {
  padding-left: 1rem;
  padding-right: 1rem;
}

.btn.with-padding-x-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.btn-group {
  border-radius: 4px;
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn {
  background-color: var(--gray-100);
  box-shadow: inset 0 0 5px rgb(0 0 0 / 5%);
  position: relative;
  flex: 1 1 auto;

  &.active {
    background-color: #fff;
    box-shadow: none;
  }
}

.btn-group > .btn:not(:last-child, .dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn-group:not(:first-child),
.btn-group > :not(.btn-check:first-child) + .btn {
  margin-left: -1px;
}

.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn.btn-block {
  display: block;
  text-align: center;
  width: 100%;
}

.btn[aria-disabled="true"],
.btn.disabled {
  border-color: var(--gray-200);
  color: var(--gray-400);
  cursor: default;
}