/* Button Danger */
.button-danger {
  --btn-danger-bg: transparent;
  --btn-danger-bg-hover: transparent;
  --btn-danger-text: currentColor;
  --btn-danger-text-hover: currentColor;
  --btn-danger-border: 1px solid transparent;
  --btn-danger-border-hover: transparent;
  --btn-danger-border-disabled: var(--btn-disabled-bg);
  --btn-danger-focus-inner: currentColor;
  --btn-danger-focus-outer: currentColor;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
  text-align: center;
  cursor: pointer;
  border: var(--btn-danger-border);
  min-height: var(--button-danger-height);
  padding-inline: var(--button-danger-padding-x);
  font-family: var(--font-family-base);
  color: var(--btn-danger-text);
  background-color: var(--btn-danger-bg);
  letter-spacing: -0.02em;
  line-height: 1;
}

.button-danger:hover {
  background-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-text-hover);
  border-color: var(--btn-danger-border-hover);
}

.button-danger:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--btn-danger-focus-inner),
    0 0 0 5px var(--btn-danger-focus-outer);
}

.button-danger:active {
  transform: translateY(1px) scale(0.99);
}

.button-danger:disabled,
.button-danger[aria-disabled='true'] {
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: var(--btn-danger-border-disabled);
  cursor: not-allowed;
}

.button-danger--subtle:disabled,
.button-danger--subtle[aria-disabled='true'] {
  background-color: transparent;
  border-color: transparent;
}

.button-danger--primary {
  --btn-danger-bg: var(--btn-danger-primary-bg);
  --btn-danger-bg-hover: var(--btn-danger-primary-bg-hover);
  --btn-danger-bg-active: var(--btn-danger-primary-bg-active);
  --btn-danger-text: var(--btn-danger-primary-text);
  --btn-danger-text-hover: var(--btn-danger-primary-text-hover);
  --btn-danger-focus-inner: var(--btn-danger-primary-focus-inner);
  --btn-danger-focus-outer: var(--btn-danger-primary-focus-outer);
  --btn-danger-border: 1px solid var(--btn-danger-primary-border);
  --btn-danger-border-hover: var(--btn-danger-primary-border-hover);
}

.button-danger--secondary {
  --btn-danger-bg: var(--btn-danger-secondary-bg);
  --btn-danger-bg-hover: var(--btn-danger-secondary-bg-hover);
  --btn-danger-bg-active: var(--btn-danger-secondary-bg-active);
  --btn-danger-text: var(--btn-danger-secondary-text);
  --btn-danger-text-hover: var(--btn-danger-secondary-text-hover);
  --btn-danger-focus-inner: var(--btn-danger-secondary-focus-inner);
  --btn-danger-focus-outer: var(--btn-danger-secondary-focus-outer);
  --btn-danger-border: 1px solid var(--btn-danger-secondary-border);
  --btn-danger-border-hover: var(--btn-danger-secondary-border-hover);
}

.button-danger--subtle {
  --btn-danger-bg: var(--btn-danger-subtle-bg);
  --btn-danger-bg-hover: var(--btn-danger-subtle-bg-hover);
  --btn-danger-bg-active: var(--btn-danger-subtle-bg-active);
  --btn-danger-text: var(--btn-danger-subtle-text);
  --btn-danger-text-hover: var(--btn-danger-subtle-text-hover);
  --btn-danger-focus-inner: var(--btn-danger-subtle-focus-inner);
  --btn-danger-focus-outer: var(--btn-danger-subtle-focus-outer);
  --btn-danger-border: 1px solid var(--btn-danger-subtle-border);
  --btn-danger-border-hover: var(--btn-danger-subtle-border-hover);
}

.button-danger--small {
  --button-danger-height: 36px;
  --button-danger-padding-x: 20px;
  font-size: 16px;
}

.button-danger--medium {
  --button-danger-height: 44px;
  --button-danger-padding-x: 20px;
  font-size: 16px;
}

.button-danger--full-width {
  width: 100%;
}