/* Paired dialog radii and insets keep inner controls at 16px on both breakpoints. */
:root {
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-36: 36px;
  --radius-40: 40px;
  --radius-48: 48px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --radius-card: var(--radius-24);
  --radius-control: var(--radius-16);
  --radius-dialog: var(--radius-32);
  --space-dialog: 16px;
  --radius-dialog-inner: max(var(--radius-4), calc(var(--radius-dialog) - var(--space-dialog)));
}

@media (min-width: 640px) {
  :root {
    --radius-dialog: var(--radius-40);
    --space-dialog: 24px;
  }
}

.ui-dialog {
  border-radius: var(--radius-dialog);
}

.login-dialog {
  width: 100%;
  max-width: 28rem;
  border-radius: var(--radius-dialog);
}

.ui-dialog-padding {
  padding: var(--space-dialog);
}

.ui-dialog-inner {
  border-radius: var(--radius-dialog-inner);
}

.svip-plan button:not(.rounded-full) {
  border-radius: max(var(--radius-4), calc(var(--radius-dialog-inner) - 12px));
}

@supports (corner-shape: superellipse(1.25)) {
  :where(.login-dialog, .ui-dialog, [data-milk-dialog], .rounded-dialog,
    .feature-board, .feature-card) {
    corner-shape: superellipse(1.25);
  }

  :where(.radius-round, .radius-round *, .home-login-glass, .home-login-glass *,
    .swal2-icon, .swal2-icon *, [data-milk-action="close"], .swal2-close,
    input[type="radio"], [style*="border-radius: 50%"], [style*="border-radius:50%"],
    [style*="border-radius: 999"], [style*="border-radius:999"]),
  :where(.radius-round, .home-login-glass)::before,
  :where(.radius-round, .home-login-glass)::after {
    corner-shape: round;
  }
}