/* Aboat Vocab card styles mapped from Figma node 35544:199930. */

:root {
  --aboat-shadow-soft-1: 0 4px 16px 0 rgb(0 0 0 / 0.05);
  --aboat-shadow-soft-2: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --aboat-shadow-soft-3: 0 8px 10px -6px rgb(0 0 0 / 0.1), 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --aboat-shadow-soft-4: 0 10px 12px -6px rgb(0 0 0 / 0.1), 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --aboat-shadow-soft-5: 0 12px 14px -6px rgb(0 0 0 / 0.1), 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --aboat-card-border-soft-1: rgb(13 13 13 / 0.15);
}

.aboat-card {
  --card-radius: 16px;
  --card-shadow: var(--aboat-shadow-soft-1);
  --card-border-color: transparent;
  --card-border-width: 0;
  --card-bg: var(--aboat-color-alpha-light-900);

  display: block;
  min-width: 0;
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.aboat-card[data-level="1"],
.aboat-card--soft-1 {
  --card-radius: 24px;
  --card-shadow: var(--aboat-shadow-soft-1);
  --card-border-width: 0.5px;
  --card-border-color: var(--aboat-card-border-soft-1);
}

.aboat-card[data-level="2"],
.aboat-card--soft-2 {
  --card-shadow: var(--aboat-shadow-soft-2);
}

.aboat-card[data-level="3"],
.aboat-card--soft-3 {
  --card-shadow: var(--aboat-shadow-soft-3);
}

.aboat-card[data-level="4"],
.aboat-card--soft-4 {
  --card-shadow: var(--aboat-shadow-soft-4);
}

.aboat-card[data-level="5"],
.aboat-card--soft-5 {
  --card-shadow: var(--aboat-shadow-soft-5);
}

.aboat-card--specimen {
  width: 157px;
  height: 148px;
}

.aboat-card--padded {
  padding: 20px;
}