@magic-spells/dropdown-panel/dist/dropdown-panel.css

Accessible custom dropdown panel web component.

:root{--dp-panel-bg-color:#fff;--dp-panel-shadow:0 2px 8px rgba(0,0,0,.15);--dp-panel-border-radius:4px;--dp-panel-padding:0.5rem 0;--dp-panel-margin-top:-5px;--dp-menu-margin-top:0px;--dp-transition-duration:200ms;--dp-transition-timing:ease-out;--dp-panel-z-index:20}dropdown-component{display:inline-block}dropdown-component:focus{background:green}dropdown-component:hover dropdown-trigger:before,dropdown-trigger[aria-expanded=true]:before{background:transparent;content:"";height:30px;left:-10px;position:absolute;top:50%;transform:perspective(50px) rotateX(50deg);transform-origin:top center;width:calc(100% + 20px);z-index:10}dropdown-trigger{align-items:center;cursor:pointer;display:inline-flex;position:relative;user-select:none}dropdown-menu,dropdown-panel{background-color:var(--dp-panel-bg-color,#fff);box-shadow:var(--dp-panel-shadow,0 2px 8px rgba(0,0,0,.15));left:0;opacity:0;overflow:hidden;padding:var(--dp-panel-padding,.5rem 0);pointer-events:none;position:absolute;top:100%;transition:opacity var(--dp-transition-duration,.2s) var(--dp-transition-timing,ease-out);z-index:var(--dp-panel-z-index,20)}dropdown-panel{border-radius:var(--dp-panel-border-radius,4px);filter:blur(4px);margin-top:var(--dp-panel-margin-top,-5px);min-width:180px;transform:translateY(5px) scale(.98);transition:opacity var(--dp-transition-duration,.2s) var(--dp-transition-timing,ease-out),transform var(--dp-transition-duration,.2s) var(--dp-transition-timing,ease-out);will-change:opacity,transform,filter}dropdown-menu{margin-top:var(--dp-menu-margin-top,0);width:100%}dropdown-component:hover dropdown-panel,dropdown-panel[aria-hidden=false]{filter:blur(0);opacity:1;pointer-events:auto;transform:translateY(0) scale(1);visibility:visible}dropdown-component:hover dropdown-menu,dropdown-menu[aria-hidden=false]{opacity:1;pointer-events:auto;visibility:visible}