// ────────────────────────────────────────────────────────────────
// Komponente · Auswahl (Checkbox, Radio, Switch)
// ────────────────────────────────────────────────────────────────

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--dim);

  input[type="checkbox"],
  input[type="radio"] {
    flex: 0 0 auto;
    display: grid;
    place-content: center;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    appearance: none;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);
  }

  input[type="radio"] {
    border-radius: 50%;
  }

  input:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  }

  input:checked {
    background: var(--accent);
    border-color: var(--accent);
  }

  input[type="checkbox"]:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--on-accent);
    clip-path: polygon(14% 46%, 0 60%, 38% 100%, 100% 22%, 86% 8%, 36% 72%);
  }

  input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--on-accent);
  }

  &__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  &__title {
    color: var(--fg);
  }

  &__hint {
    font-size: var(--fs-sm);
    color: var(--muted);
  }
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--dim);

  input {
    flex: 0 0 auto;
    position: relative;
    width: 40px;
    height: 24px;
    appearance: none;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);

    &::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--fg-soft);
      transition: transform var(--dur-fast) var(--ease);
    }

    &:checked {
      background: var(--accent);
      border-color: var(--accent);

      &::after {
        transform: translateX(16px);
        background: var(--on-accent);
      }
    }
  }
}