.container {
  appearance: none;
  border: none;
  background-color: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 6px;
}

.container:active {
  background-color: var(--color-highlightMed);
}

.container[data-state="checked"] {
  background-color: var(--color-overlay);
}

.label {
  text-align: center;
  font-size: 12px;
  color: var(--color-subtle);
}

.container[data-state="checked"] .label {
  font-weight: 500;
  color: var(--color-text);
}

.icon {
  overflow: hidden;
  /* outer radius - padding / 2 */
  border-radius: calc(6px - 6px / 2);
}
