@layer components {
  .form-label {
    display: inline-block;
    margin-block-end: 0.2rem;
  }

  .form-input {
    display: block;
    width: 100%;
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: .5rem;
    border: 1px solid var(--color-text-soft);
    border-radius: 0.25rem;

    &:disabled {
      opacity: 0.3;
    }
  }

  .form-sort-select {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    font-size: var(--text-sm);
  }

  .pills-wrapper {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
  }

  .form-checkbox-pill {
    --pill-bg: var(--color-surface);
    --pill-border: var(--color-text);
    --pill-text: var(--color-text);
    --pill-active-bg: var(--color-surface-variant);
    --pill-active-text: var(--color-text);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* gap: 0.45rem; */
    padding: 0.65rem 1rem;
    border: 1px solid var(--pill-border);
    border-radius: 999px;
    background: var(--pill-bg);
    color: var(--pill-text);
    font: 500 0.95rem/1 system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      transform 0.15s ease;
  }

  /* Hide native checkbox */
  .form-checkbox-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* Checkmark */
  .form-checkbox-pill::before {
    content: "";
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      width 0.2s ease,
      opacity 0.2s ease;
  }

  /* Show checkmark when checked */
  .form-checkbox-pill:has(input[type="checkbox"]:checked)::before {
    content: "✓";
    width: 0.75rem;
    opacity: 1;
    margin-inline-end: 0.5rem;
  }

  /* Checked state */
  .form-checkbox-pill:has(input[type="checkbox"]:checked) {
    background: var(--pill-active-bg);
    border-color: var(--pill-active-bg);
    color: var(--pill-active-text);
  }

  /* Hover */
  .form-checkbox-pill:hover {
    border-color: #9ca3af;
    transform: translateY(-1px);
  }

  /* Focus state */
  .form-checkbox-pill:has(input[type="checkbox"]:focus-visible) {
    outline: 3px solid rgba(59, 130, 246, 0.35);
    outline-offset: 2px;
  }
}