@layer platform {
  /* The native wrapper passes the OS text-size preference through as an
     attribute on the root element. */
  :root:has([data-platform~=ios]) {
    &[data-text-size=xsmall] { font-size: 14px; }
    &[data-text-size=small] { font-size: 15px; }
    &[data-text-size=medium] { font-size: 16px; }
    &[data-text-size=large] { font-size: 17px; }
    &[data-text-size=xlarge] { font-size: 19px; }
    &[data-text-size=xxlarge] { font-size: 21px; }
    &[data-text-size=xxxlarge] { font-size: 23px; }
  }

  [data-platform~=ios] {
    .hide-on-ios {
      display: none;
    }
  }
}