@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)}details[is-~=popover][open] summary::marker{content:"";display:none}details[is-~=popover][open] summary+*{position:absolute;z-index:2}details[is-~=popover][open]:not([position-]) summary+*,details[is-~=popover][open][position-~=baseline-left] 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]:not([position-]) summary+*,details[is-~=popover][open][position-~=bottom] summary+*{top:calc(100% + var(--popover-offset-y))}}