/* Component variants own typography, outline and box metrics together. Scene
 * placement remains authored by the scene; colours of product claims remain
 * authored by the product. */
.easy-pill[data-pill-role="section"],
.easy-pill[data-pill-role="nav"] {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  width:max-content!important; max-width:calc(100% - 24px);
  min-height:var(--pill-height)!important; height:var(--pill-height)!important;
  padding:0 .9em!important; border:2px solid var(--c-ink)!important; border-radius:999px!important;
  font-family:var(--font-display); font-size:var(--pill-font)!important;
  font-weight:500!important; line-height:1!important; white-space:nowrap;
  color:var(--c-ink); background:transparent;
}
.desktop-layout .easy-pill[data-pill-role="section"] {
  --pill-height:max(28px,calc(var(--scene-unit) * 2.569444));
  --pill-font:clamp(14px,calc(var(--scene-unit) * 1.666667),24px);
}
.desktop-layout .easy-pill[data-pill-role="nav"] {
  --pill-height:max(28px,calc(var(--scene-unit) * 2.569444));
  --pill-font:clamp(14px,calc(var(--scene-unit) * 1.25),18px);
}
.mobile-layout .easy-pill[data-pill-role="section"] {
  --pill-height:max(28px,calc(var(--scene-unit) * 9.414758));
  --pill-font:max(12px,calc(var(--scene-unit) * 3.816794));
}
.easy-pill[data-pill-split] {
  min-width:var(--pill-source-width);
  /* Original text started halfway down a separate capsule. When the capsule
   * becomes its own box, keep that same centre instead of pushing text down. */
  translate:0 calc((var(--pill-source-line) - var(--pill-height)) / 2);
}
.ui-pill.easy-pill[data-pill-role="section"] {
  margin-left:calc(var(--scene-unit) * 50)!important; transform:translate(-50%,-50%)!important;
}
.easy-pill[data-pill-role="volume"] { border-width:2px!important; }
.easy-pill[data-pill-role="nav"]::before {
  content:""; position:absolute; inset:min(0px,calc(50% - 22px)) 0;
}
.easy-pill[data-pill-role="nav"]:focus-visible {
  outline:3px solid currentColor; outline-offset:4px;
}
.easy-pill[data-pill-role="nav"][aria-current] { background:var(--c-lavender); }