/* The terms checkbox above the button on both signups (shared/_terms_acceptance). */
@layer components {
  .terms_acceptance {
    width: 100%;
    font-size: var(--text-sm);

    a {
      color: var(--color-link);
    }

    .terms_acceptance_field {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 48px;
      color: var(--color-text);
      cursor: pointer;

      input {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        accent-color: var(--color-primary);
      }

      &.error {
        color: var(--color-danger-text);
      }
    }

    .terms_acceptance_error {
      margin: 0;
      color: var(--color-danger-text);
    }
  }
}