/* Public page buttons (owner pick, Edge fill): a white button with soft square
   corners and a colour edge on both sides, green for a main action and purple
   for its partner. On hover and keyboard focus the two edges grow inward and
   meet in the middle over half a second; the label turns white only after the
   button is fully covered.
   static/js/public-button-hover.js marks each button with data-fill-hover
   ("primary" or "secondary"), so every page's own button class is covered.
   Add data-fill-hover-off to keep a button out. Buttons in a white-label
   colour are not marked. This layer is declared before the other public
   layers so its values win. */
@layer public-button-hover {
  body[data-public-site] [data-fill-hover] {
    --pbh-fill: #00C434;
    background-color: #fff !important;
    background-image: linear-gradient(var(--pbh-fill), var(--pbh-fill)), linear-gradient(var(--pbh-fill), var(--pbh-fill)) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0, 100% 0 !important;
    background-size: 7px 100%, 7px 100% !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    border: 1px solid #D7DBE3 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #1B1C1A !important;
    transition: none !important;
  }
  body[data-public-site] [data-fill-hover="secondary"] { --pbh-fill: #6B48E0; }
  /* Motion starts after the buttons are marked, so nothing animates on page load. */
  html[data-fill-hover-ready] body[data-public-site] [data-fill-hover] {
    transition: background-size 500ms ease-out, color 120ms ease-out 500ms, border-color 120ms ease-out 500ms !important;
  }
  body[data-public-site] [data-fill-hover] :where(span, strong, b, svg) { color: inherit !important; }
  body[data-public-site] [data-fill-hover]:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
    background-size: 50.5% 100%, 50.5% 100% !important;
    border-color: var(--pbh-fill) !important;
    color: #fff !important;
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-fill-hover-ready] body[data-public-site] [data-fill-hover] { transition: none !important; }
  }
}