@layer components {
  .check {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background-color: var(--color-caution-soft);
  }

  .check__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font: var(--type-label);
    color: var(--color-ink);
  }

  .check__label::before {
    content: "";
    inline-size: var(--check-pip-size);
    block-size: var(--check-pip-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-caution);
  }

  .check__question {
    font: var(--type-body);
    color: var(--color-ink);
    text-wrap: pretty;
  }

  .check__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-3);
  }
}