@layer components{@property --popover-offset-x{syntax: "<length>"; inherits: true; initial-value: 0;}@property --popover-offset-y{syntax: "<length>"; inherits: true; initial-value: 0;}details[is-=popover]{--popover-backdrop-color: transparent;position:relative}details[is-=popover] summary:focus{text-decoration:underline}details[is-=popover] summary::marker{content:"";display:none}details[is-=popover][open] summary:before{content:"";display:block;width:100vw;height:100vh;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background-color:var(--popover-backdrop-color);cursor:default}details[is-=popover][open] summary::marker{content:"";display:none}details[is-=popover][open] summary+*{position:absolute;z-index:2}details[is-=popover][open][position-~=baseline-left] summary+*,details[is-=popover][open]:not([position-]) summary+*{left:0%}details[is-=popover][open][position-~=baseline-right] summary+*{left:100%;translate:-100%}details[is-=popover][open][position-~=left] summary+*{left:calc(var(--popover-offset-x) * -1);translate:-100%}details[is-=popover][open][position-~=right] summary+*{left:calc(100% + var(--popover-offset-x))}details[is-=popover][open][position-~=baseline-top] summary+*{top:0%}details[is-=popover][open][position-~=baseline-bottom] summary+*{top:100%;transform:translateY(-100%)}details[is-=popover][open][position-~=top] summary+*{top:calc(var(--popover-offset-y) * -1);transform:translateY(-100%)}details[is-=popover][open][position-~=bottom] summary+*,details[is-=popover][open]:not([position-]) summary+*{top:calc(100% + var(--popover-offset-y))}}