:root{--shadow-color: 220 3% 15%;--shadow-strength: 1%}@media(prefers-color-scheme:dark){:root{--shadow-color: 220 40% 2%;--shadow-strength: 25%}}*,*:after,*:before{box-sizing:border-box}html{color-scheme:none;background:transparent}body{display:grid;place-items:center;align-content:center;min-height:100vh;gap:1.75rem;color:#212529;background:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif,system-ui;position:relative}#position{--transition: .2s;anchor-name:--menu;position:relative}[behavior=button]{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;color:inherit;cursor:pointer;padding:.5rem 1.25rem;width:180px;display:flex;justify-content:space-between;align-items:center;border-radius:5px;border:0;box-shadow:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));background:#f1f3f5}:where(span,[role=option]){font-size:var(--font-size, 1rem);font-weight:var(--font-weight, 400)}[role=option]{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;width:100%;outline-width:0;display:flex;gap:1.25rem;align-items:center;padding:.5rem 1.25rem}[role=option] .👉{display:inline-block}[role=option][data-value=top] .👉{rotate:-90deg}[role=option][data-value=right] .👉{rotate:0deg}[role=option][data-value=bottom] .👉{rotate:90deg}[role=option][data-value=left] .👉{rotate:180deg}.👆,.👉{font-size:2rem}.👆{transform:rotate(var(--rotate, var(--base-rotate, 0deg)));transition:transform .35s cubic-bezier(.5,.75,.75,1.25)}#position:has([popover]:popover-open) .👆{--rotate: 540deg}#position [popover]{overflow:visible;border:0;border-radius:5px;margin:0;position:fixed;top:anchor(--menu bottom);left:anchor(--menu left);width:anchor-size(--menu width);box-shadow:0 -1px 3px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));opacity:var(--open, 0);translate:0 calc(var(--open, 0) * 5%);transform-origin:50% 0;transition:translate var(--transition),opacity var(--transition),display var(--transition) allow-discrete,overlay var(--transition) allow-discrete;background:#f1f3f5;padding:0}#position [popover] [role=option]+[role=option]{border-top:1px solid #e9ecef}[role=option][aria-selected=true]{font-weight:700}[role=option].active{background:#e9ecef}[role=option]:hover{background:#ced4da}@property --open{syntax: "<number>"; inherits: true; initial-value: 0;}#position [popover]:popover-open{--open: 1}@starting-style{#position [popover]:popover-open{--open: 0}}#position[data-value=top]{--base-rotate: 0deg}#position[data-value=right]{--base-rotate: 90deg}#position[data-value=bottom]{--base-rotate: 180deg}#position[data-value=left]{--base-rotate: 270deg}