/* Aboat Vocab button component styles mapped from Figma node 35008:491. */

.aboat-button {
  --button-bg: transparent;
  --button-fg: var(--aboat-text-level-1);
  --button-border: transparent;
  --button-min-width: 154px;
  --button-width: auto;
  --button-height: 50px;
  --button-padding-inline: 60px;
  --button-font-size: 15px;
  --button-line-height: 22px;

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: var(--button-width);
  min-width: var(--button-min-width);
  height: var(--button-height);
  padding: 8px var(--button-padding-inline);
  border: 1px solid var(--button-border);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-fg);
  font: 400 var(--button-font-size) / var(--button-line-height) "PingFang SC", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.aboat-button:focus-visible {
  outline: 2px solid var(--aboat-color-blue-light-400);
  outline-offset: 2px;
}

.aboat-button:active,
.aboat-button.is-press {
  transform: translateY(1px);
}

.aboat-button:disabled,
.aboat-button[aria-disabled="true"],
.aboat-button.is-disabled {
  cursor: not-allowed;
  transform: none;
}

.aboat-button__icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: currentColor;
}

.aboat-button__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.aboat-button[data-icon-only="true"] {
  --button-width: 50px;
  --button-min-width: 50px;
  --button-padding-inline: 0;
}

.aboat-button[data-icon-text="true"] {
  --button-width: auto;
  --button-min-width: 74px;
  --button-padding-inline: 20px;
  --button-font-size: 17px;
}

.aboat-button[data-variant="primary"] {
  --button-bg: var(--aboat-interactive-primary-default);
  --button-fg: var(--aboat-text-unchanged-light);
}

.aboat-button[data-variant="primary"]:hover,
.aboat-button[data-variant="primary"].is-hover {
  --button-bg: var(--aboat-interactive-primary-hover);
}

.aboat-button[data-variant="primary"]:active,
.aboat-button[data-variant="primary"].is-press {
  --button-bg: var(--aboat-interactive-primary-press);
  --button-fg: var(--aboat-text-alpha-4);
}

.aboat-button[data-variant="primary"]:disabled,
.aboat-button[data-variant="primary"][aria-disabled="true"],
.aboat-button[data-variant="primary"].is-disabled {
  --button-bg: var(--aboat-interactive-primary-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="secondary"] {
  --button-bg: var(--aboat-interactive-secondary-default);
  --button-fg: var(--aboat-text-unchanged-light);
}

.aboat-button[data-variant="secondary"]:hover,
.aboat-button[data-variant="secondary"].is-hover {
  --button-bg: var(--aboat-interactive-secondary-hover);
}

.aboat-button[data-variant="secondary"]:active,
.aboat-button[data-variant="secondary"].is-press {
  --button-bg: var(--aboat-interactive-secondary-press);
  --button-fg: var(--aboat-text-unchanged-light);
}

.aboat-button[data-variant="secondary"]:disabled,
.aboat-button[data-variant="secondary"][aria-disabled="true"],
.aboat-button[data-variant="secondary"].is-disabled {
  --button-bg: var(--aboat-interactive-secondary-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="tertiary"] {
  --button-bg: var(--aboat-interactive-tertiary-default);
  --button-fg: var(--aboat-text-alpha-6);
}

.aboat-button[data-variant="tertiary"]:hover,
.aboat-button[data-variant="tertiary"].is-hover {
  --button-bg: var(--aboat-interactive-tertiary-hover);
}

.aboat-button[data-variant="tertiary"]:active,
.aboat-button[data-variant="tertiary"].is-press {
  --button-bg: var(--aboat-interactive-tertiary-press);
  --button-fg: var(--aboat-text-alpha-4);
}

.aboat-button[data-variant="tertiary"]:disabled,
.aboat-button[data-variant="tertiary"][aria-disabled="true"],
.aboat-button[data-variant="tertiary"].is-disabled {
  --button-bg: var(--aboat-interactive-tertiary-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="outline"],
.aboat-button[data-variant="option-1"],
.aboat-button[data-variant="option-2"] {
  --button-bg: var(--aboat-interactive-outline-fill-default);
  --button-border: var(--aboat-interactive-outline-stroke-default);
  --button-fg: var(--aboat-text-level-2);
}

.aboat-button[data-variant="outline"]:hover,
.aboat-button[data-variant="outline"].is-hover {
  --button-bg: var(--aboat-interactive-outline-fill-hover);
  --button-border: var(--aboat-interactive-outline-stroke-hover);
}

.aboat-button[data-variant="outline"]:active,
.aboat-button[data-variant="outline"].is-press {
  --button-bg: var(--aboat-interactive-outline-fill-press);
  --button-border: var(--aboat-interactive-outline-stroke-press);
  --button-fg: var(--aboat-text-alpha-4);
}

.aboat-button[data-variant="outline"]:disabled,
.aboat-button[data-variant="outline"][aria-disabled="true"],
.aboat-button[data-variant="outline"].is-disabled {
  --button-bg: var(--aboat-interactive-outline-fill-disable);
  --button-border: var(--aboat-interactive-outline-stroke-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="ghost"] {
  --button-bg: var(--aboat-interactive-outline-fill-default);
  --button-fg: var(--aboat-text-level-2);
}

.aboat-button[data-variant="ghost"]:hover,
.aboat-button[data-variant="ghost"].is-hover {
  --button-bg: var(--aboat-interactive-tertiary-disable);
}

.aboat-button[data-variant="ghost"]:active,
.aboat-button[data-variant="ghost"].is-press {
  --button-bg: var(--aboat-interactive-tertiary-press);
  --button-fg: var(--aboat-text-alpha-4);
}

.aboat-button[data-variant="ghost"]:disabled,
.aboat-button[data-variant="ghost"][aria-disabled="true"],
.aboat-button[data-variant="ghost"].is-disabled {
  --button-bg: var(--aboat-interactive-tertiary-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="danger"] {
  --button-bg: var(--aboat-interactive-danger-default-default);
  --button-fg: var(--aboat-interactive-danger-severe-default);
}

.aboat-button[data-variant="danger"]:hover,
.aboat-button[data-variant="danger"].is-hover {
  --button-bg: var(--aboat-interactive-danger-default-hover);
}

.aboat-button[data-variant="danger"]:active,
.aboat-button[data-variant="danger"].is-press {
  --button-bg: var(--aboat-interactive-danger-default-press);
  --button-fg: var(--aboat-interactive-danger-severe-press);
}

.aboat-button[data-variant="danger"]:disabled,
.aboat-button[data-variant="danger"][aria-disabled="true"],
.aboat-button[data-variant="danger"].is-disabled {
  --button-bg: var(--aboat-interactive-danger-default-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="danger-severe"] {
  --button-bg: var(--aboat-interactive-danger-severe-default);
  --button-fg: var(--aboat-text-unchanged-light);
}

.aboat-button[data-variant="danger-severe"]:hover,
.aboat-button[data-variant="danger-severe"].is-hover {
  --button-bg: var(--aboat-interactive-danger-severe-hover);
}

.aboat-button[data-variant="danger-severe"]:active,
.aboat-button[data-variant="danger-severe"].is-press {
  --button-bg: var(--aboat-interactive-danger-severe-press);
  --button-fg: var(--aboat-color-alpha-light-300);
}

.aboat-button[data-variant="danger-severe"]:disabled,
.aboat-button[data-variant="danger-severe"][aria-disabled="true"],
.aboat-button[data-variant="danger-severe"].is-disabled {
  --button-bg: var(--aboat-interactive-danger-severe-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="option-1"]:hover,
.aboat-button[data-variant="option-1"].is-hover {
  --button-bg: var(--aboat-interactive-outline-fill-hover);
  --button-border: var(--aboat-interactive-options-1-selected);
}

.aboat-button[data-variant="option-1"]:active,
.aboat-button[data-variant="option-1"].is-press {
  --button-bg: var(--aboat-interactive-options-1-selected);
  --button-border: var(--aboat-interactive-options-1-stroke);
  --button-fg: var(--aboat-interactive-options-1-press);
}

.aboat-button[data-variant="option-1"]:disabled,
.aboat-button[data-variant="option-1"][aria-disabled="true"],
.aboat-button[data-variant="option-1"].is-disabled {
  --button-bg: var(--aboat-interactive-outline-fill-disable);
  --button-border: var(--aboat-interactive-outline-stroke-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="option-2"]:hover,
.aboat-button[data-variant="option-2"].is-hover {
  --button-bg: var(--aboat-interactive-outline-fill-hover);
  --button-border: var(--aboat-interactive-danger-default-press);
}

.aboat-button[data-variant="option-2"]:active,
.aboat-button[data-variant="option-2"].is-press {
  --button-bg: var(--aboat-interactive-danger-default-press);
  --button-border: var(--aboat-interactive-danger-severe-hover);
  --button-fg: var(--aboat-interactive-danger-severe-default);
}

.aboat-button[data-variant="option-2"]:disabled,
.aboat-button[data-variant="option-2"][aria-disabled="true"],
.aboat-button[data-variant="option-2"].is-disabled {
  --button-bg: var(--aboat-interactive-outline-fill-disable);
  --button-border: var(--aboat-interactive-outline-stroke-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="white"] {
  --button-bg: var(--aboat-interactive-white-fill-default);
  --button-border: var(--aboat-interactive-white-stroke-default);
  --button-fg: var(--aboat-text-unchanged-drak);
}

.aboat-button[data-variant="white"]:hover,
.aboat-button[data-variant="white"].is-hover {
  --button-bg: var(--aboat-interactive-white-fill-hover);
  --button-border: var(--aboat-interactive-white-stroke-hover);
}

.aboat-button[data-variant="white"]:active,
.aboat-button[data-variant="white"].is-press {
  --button-bg: var(--aboat-interactive-white-fill-press);
  --button-border: var(--aboat-interactive-white-stroke-press);
}

.aboat-button[data-variant="white"]:disabled,
.aboat-button[data-variant="white"][aria-disabled="true"],
.aboat-button[data-variant="white"].is-disabled {
  --button-bg: var(--aboat-interactive-white-fill-disable);
  --button-border: var(--aboat-interactive-white-stroke-disable);
  --button-fg: var(--aboat-text-alpha-3);
}

.aboat-button[data-variant="icon"] {
  --button-bg: var(--aboat-interactive-icon-default);
  --button-border: transparent;
  --button-fg: var(--aboat-text-level-2);
}

.aboat-button[data-variant="icon"]:hover,
.aboat-button[data-variant="icon"].is-hover {
  --button-bg: var(--aboat-interactive-icon-hover);
}

.aboat-button[data-variant="icon"]:active,
.aboat-button[data-variant="icon"].is-press {
  --button-bg: var(--aboat-interactive-icon-press);
}

.aboat-button[data-variant="icon"]:disabled,
.aboat-button[data-variant="icon"][aria-disabled="true"],
.aboat-button[data-variant="icon"].is-disabled {
  --button-bg: var(--aboat-interactive-icon-disable);
  --button-fg: var(--aboat-text-alpha-3);
}