.group {
  display: grid;
  gap: var(--ac-space-2);
}

.item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--ac-primary);
  border-radius: 999px;
  background-color: var(--ac-background);
  color: var(--ac-primary);
  cursor: pointer;
  outline: none;
  transition: border-color var(--ac-transition-fast), background-color var(--ac-transition-fast);

  &:focus-visible {
    outline: 2px solid var(--ac-ring);
    outline-offset: 2px;
  }

  &[data-disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 0.625rem;
  height: 0.625rem;
  fill: currentcolor;
}