/* Segmented "pill" tab bar — light gray track with a white active pill. */
.list {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  background: var(--mantine-color-gray-1);
  border-radius: var(--mantine-radius-md);
  border: none;
  flex-wrap: wrap;
}

.tab {
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-weight: 500;
  color: var(--mantine-color-gray-7);
  background: transparent;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}

.tab:hover {
  background: transparent;
  color: var(--mantine-color-gray-9);
}

.tab[data-active],
.tab[data-active]:hover {
  background: var(--mantine-color-body);
  color: var(--mantine-color-emaPrimary-7);
  font-weight: 600;
  box-shadow: var(--mantine-shadow-xs);
}

[data-mantine-color-scheme='dark'] .list {
  background: var(--mantine-color-dark-6);
}

[data-mantine-color-scheme='dark'] .tab {
  color: var(--mantine-color-dark-1);
}

[data-mantine-color-scheme='dark'] .tab:hover {
  color: var(--mantine-color-white);
}

/* Selectable option card (language + appearance). */
.choice {
  border: 1px solid var(--mantine-color-gray-3);
  border-radius: var(--mantine-radius-md);
  background: var(--mantine-color-body);
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

.choice:hover {
  border-color: var(--mantine-color-gray-4);
}

[data-mantine-color-scheme='dark'] .choice {
  border-color: var(--mantine-color-dark-4);
}

[data-mantine-color-scheme='dark'] .choice:hover {
  border-color: var(--mantine-color-dark-3);
}

.choiceActive,
.choiceActive:hover {
  border-color: var(--mantine-color-emaPrimary-6);
  background: var(--mantine-color-emaPrimary-0);
}

[data-mantine-color-scheme='dark'] .choiceActive,
[data-mantine-color-scheme='dark'] .choiceActive:hover {
  background: var(--mantine-color-dark-6);
}
