dialog{opacity:0;transition:opacity .6s ease-in}dialog[open]{position:fixed;z-index:100;border:1px solid rgba(0,0,0,.1);border-radius:.375rem;margin:auto;padding:0;opacity:1;display:flex;flex-direction:column;max-height:90vh;max-width:90vw}dialog[open] header,dialog[open] main,dialog[open] footer{padding:.5rem 1rem}dialog[open] header{border-bottom:1px solid rgba(0,0,0,.1)}dialog[open] header .title{font-size:1.25rem;display:flex;justify-content:space-between}dialog[open] header .title button{text-align:end;border:none;background:rgba(0,0,0,0);max-width:32px;opacity:.5}dialog[open] header .title button:hover{opacity:.75}dialog[open] main{flex:1;overflow-y:auto;max-height:60vh;min-width:60vw}dialog[open] footer{text-align:right;border-top:1px solid rgba(0,0,0,.1);overflow:inherit;background-color:initial;color:initial}dialog[open] footer button.outline{outline-style:unset}dialog__content{position:relative}dialog::backdrop{background-color:rgba(0,0,0,.5)}html:has(dialog[open]){overflow:hidden}