.x-overlay {
  color: var(--neutral-12);
}

.x-overlay:where([open])::backdrop {
  background: var(--overlay-backdrop, var(--color-overlay));
}

.x-overlay > .x-card {
  contain: none;
  touch-action: pan-y;
  position: static;
  overflow-y: auto;
}

:where(.x-overlay:not([data-material-background], [data-material-background] .x-overlay)) {
  --color-material: var(--color-material-solid);
  --backdrop-filter-material: none;
}

.x-overlay:where([data-resize], [data-draggable]):before, .x-overlay:where([data-resize], [data-draggable]):after {
  content: "";
  z-index: 1;
  pointer-events: none;
  position: absolute;
}

.x-overlay:where([data-draggable]:not([data-resize^="end-"])):after {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--overlay-grip-radius, var(--radius-5));
  background-color: var(--neutral-a8);
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
}

.x-overlay:where([data-draggable][data-resize="start-start"]):after {
  inset-inline-start: auto;
  inset-inline-end: var(--space-2);
}

.x-overlay:where([data-draggable][data-resize^="end-"]):after {
  top: var(--space-2);
  width: var(--space-8);
  height: var(--space-1);
  border-radius: max(var(--radius-1), var(--radius-pill));
  background-color: var(--neutral-a8);
  margin-inline: auto;
  inset-inline: 0;
}

.x-overlay:where([data-resize^="block-"]):before {
  width: var(--space-8);
  height: var(--space-1);
  border-radius: max(var(--radius-1), var(--radius-pill));
  background-color: var(--neutral-a8);
  margin-inline: auto;
  inset-inline: 0;
}

.x-overlay:where([data-resize="block-start"]):before {
  top: var(--space-2);
}

.x-overlay:where([data-resize="block-end"]):before {
  bottom: var(--space-2);
}

.x-overlay:where([data-resize^="inline-"]):before {
  width: var(--space-1);
  height: var(--space-8);
  border-radius: max(var(--radius-1), var(--radius-pill));
  background-color: var(--neutral-a8);
  margin-block: auto;
  inset-block: 0;
}

.x-overlay:where([data-resize="inline-start"]):before {
  inset-inline-start: var(--space-2);
}

.x-overlay:where([data-resize="inline-end"]):before {
  inset-inline-end: var(--space-2);
}

.x-overlay:where([data-resize^="start-"], [data-resize^="end-"]):before {
  --_grip-r: max(calc(var(--overlay-grip-radius, var(--radius-5)) - var(--space-1)),
    0px);
  --_cap: min(var(--space-1), calc(var(--_grip-r) * 9999));
  --_gx: 1;
  --_gy: 1;
  content: "";
  z-index: 1;
  pointer-events: none;
  width: max(calc(var(--_grip-r) + var(--space-1)), calc(var(--space-1) * 3));
  height: max(calc(var(--_grip-r) + var(--space-1)), calc(var(--space-1) * 3));
  border: var(--space-1) solid var(--neutral-a8);
  border-bottom-right-radius: var(--_grip-r);
  transform: scale(var(--_gx), var(--_gy));
  -webkit-mask: /* tails, cut flat at the cap centers (full length when capless) */
    linear-gradient(#000, #000) right 0 top calc(var(--_cap) / 2) /
      var(--space-1) calc(100% - var(--_cap) / 2) no-repeat,
    linear-gradient(#000, #000) left calc(var(--_cap) / 2) bottom 0 /
      calc(100% - var(--_cap) / 2) var(--space-1) no-repeat,
    /* arc quadrant — the border's own curve shows through */
    linear-gradient(#000, #000) 100% 100% / var(--_grip-r) var(--_grip-r)
      no-repeat,
    /* round caps, centered on the flat cuts over solid border ink */
    radial-gradient(circle closest-side,
        #000 calc(100% - .5px),
        transparent)
      right 0 top 0 / var(--_cap) var(--_cap) no-repeat,
    radial-gradient(circle closest-side,
        #000 calc(100% - .5px),
        transparent)
      left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
  mask: /* tails, cut flat at the cap centers (full length when capless) */
    linear-gradient(#000, #000) right 0 top calc(var(--_cap) / 2) /
      var(--space-1) calc(100% - var(--_cap) / 2) no-repeat,
    linear-gradient(#000, #000) left calc(var(--_cap) / 2) bottom 0 /
      calc(100% - var(--_cap) / 2) var(--space-1) no-repeat,
    /* arc quadrant — the border's own curve shows through */
    linear-gradient(#000, #000) 100% 100% / var(--_grip-r) var(--_grip-r)
      no-repeat,
    /* round caps, centered on the flat cuts over solid border ink */
    radial-gradient(circle closest-side,
        #000 calc(100% - .5px),
        transparent)
      right 0 top 0 / var(--_cap) var(--_cap) no-repeat,
    radial-gradient(circle closest-side,
        #000 calc(100% - .5px),
        transparent)
      left 0 bottom 0 / var(--_cap) var(--_cap) no-repeat;
  position: absolute;
}

.x-overlay:where([data-resize="start-end"], [data-resize="end-end"]):before {
  inset-inline-end: var(--space-1);
}

.x-overlay:where([data-resize="start-start"], [data-resize="end-start"]):before {
  --_gx: -1;
  inset-inline-start: var(--space-1);
}

.x-overlay:where([data-resize^="end-"]):before {
  bottom: var(--space-1);
}

.x-overlay:where([data-resize^="start-"]):before {
  top: var(--space-1);
  --_gy: -1;
}

.x-overlay:where([data-resize="start-end"], [data-resize="end-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
  --_gx: -1;
}

.x-overlay:where([data-resize="start-start"], [data-resize="end-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
  --_gx: 1;
}

.x-overlay > .x-overlay-arrow {
  display: none;
}

.x-overlay:where([data-placed]) > .x-overlay-arrow {
  --_as: var(--overlay-arrow-size, 10px);
  z-index: -1;
  width: var(--_as);
  height: var(--_as);
  background-color: var(--color-material, var(--color-surface));
  box-shadow: 0 0 0 .5px var(--neutral-a3);
  transition: top var(--overlay-duration, .3s)
      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
    left var(--overlay-duration, .3s)
      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
  display: block;
  position: absolute;
  rotate: 45deg;
}

.x-overlay:where([data-placed="bottom"]) > .x-overlay-arrow {
  top: calc(var(--_as) / -2);
  left: var(--overlay-arrow-x, calc(50% - var(--_as) / 2));
}

.x-overlay:where([data-placed="top"]) > .x-overlay-arrow {
  bottom: calc(var(--_as) / -2);
  left: var(--overlay-arrow-x, calc(50% - var(--_as) / 2));
}

.x-overlay:where([data-placed="right"]) > .x-overlay-arrow {
  left: calc(var(--_as) / -2);
  top: var(--overlay-arrow-y, calc(50% - var(--_as) / 2));
}

.x-overlay:where([data-placed="left"]) > .x-overlay-arrow {
  right: calc(var(--_as) / -2);
  top: var(--overlay-arrow-y, calc(50% - var(--_as) / 2));
}

@supports (transition-behavior: allow-discrete) {
  .x-overlay {
    transition-property: top, left, translate, transform, width, height, opacity, scale, display;
    transition-duration: var(--overlay-duration);
    transition-timing-function: var(--overlay-easing);
    transition-behavior: allow-discrete;
  }

  .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]) {
    opacity: 0;
    scale: .97;
  }

  .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]):where([open], :popover-open) {
    opacity: 1;
    scale: 1;
  }

  @starting-style {
    .x-overlay:where(:not([data-resize]), [data-resize^="start-"], [data-resize^="end-"]):where([open], :popover-open) {
      opacity: 0;
      scale: .97;
    }
  }

  .x-overlay:where([data-placed="bottom"]) {
    transform-origin: top;
  }

  .x-overlay:where([data-placed="top"]) {
    transform-origin: bottom;
  }

  .x-overlay:where([data-placed="right"]) {
    transform-origin: 0;
  }

  .x-overlay:where([data-placed="left"]) {
    transform-origin: 100%;
  }

  .x-overlay:where([data-resize="block-start"]) {
    --_ey: 100%;
  }

  .x-overlay:where([data-resize="block-start"]):where([open], :popover-open) {
    --_ey: 0%;
  }

  @starting-style {
    .x-overlay:where([data-resize="block-start"]):where([open], :popover-open) {
      --_ey: 100%;
    }
  }

  .x-overlay:where([data-resize="block-end"]) {
    --_ey: -100%;
  }

  .x-overlay:where([data-resize="block-end"]):where([open], :popover-open) {
    --_ey: 0%;
  }

  @starting-style {
    .x-overlay:where([data-resize="block-end"]):where([open], :popover-open) {
      --_ey: -100%;
    }
  }

  .x-overlay:where([data-resize="inline-start"]) {
    --_ex: 100%;
  }

  .x-overlay:where([data-resize="inline-start"]):where([open], :popover-open) {
    --_ex: 0%;
  }

  @starting-style {
    .x-overlay:where([data-resize="inline-start"]):where([open], :popover-open) {
      --_ex: 100%;
    }
  }

  .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    --_ex: -100%;
  }

  .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
    --_ex: 0%;
  }

  @starting-style {
    .x-overlay:where([data-resize="inline-start"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
      --_ex: -100%;
    }
  }

  .x-overlay:where([data-resize="inline-end"]) {
    --_ex: -100%;
  }

  .x-overlay:where([data-resize="inline-end"]):where([open], :popover-open) {
    --_ex: 0%;
  }

  @starting-style {
    .x-overlay:where([data-resize="inline-end"]):where([open], :popover-open) {
      --_ex: -100%;
    }
  }

  .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    --_ex: 100%;
  }

  .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
    --_ex: 0%;
  }

  @starting-style {
    .x-overlay:where([data-resize="inline-end"]):where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):where([open], :popover-open) {
      --_ex: 100%;
    }
  }

  .x-overlay::backdrop {
    opacity: 0;
    transition-property: opacity, display;
    transition-duration: var(--overlay-duration);
    transition-timing-function: var(--overlay-easing);
    transition-behavior: allow-discrete;
  }

  .x-overlay:where([open])::backdrop {
    opacity: 1;
  }

  @starting-style {
    .x-overlay:where([open])::backdrop {
      opacity: 0;
    }
  }

  @supports (overlay: auto) {
    .x-overlay {
      transition-property: top, left, translate, transform, width, height, opacity, scale, display, overlay;
    }

    .x-overlay::backdrop {
      transition-property: opacity, display, overlay;
    }
  }
}

@supports selector(:has(*)) {
  [data-overlay-deck] {
    transform-origin: 50% 0;
    transition-property: scale, translate, border-radius;
    transition-duration: var(--overlay-duration, .3s);
    transition-timing-function: var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
  }

  :root:has(.x-overlay[data-resize="block-start"][open]) [data-overlay-deck] {
    scale: .96;
    translate: 0 var(--space-2);
    border-radius: var(--radius-4);
    overflow: clip;
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-overlay, .x-overlay::backdrop, [data-overlay-deck] {
    transition: none;
  }
}

@media (forced-colors: active) {
  .x-overlay:where([data-resize]):before {
    background-color: buttontext;
    border-color: buttontext;
  }

  .x-overlay:where([data-draggable]):after {
    background-color: buttontext;
  }
}