.modal__wrapper:modal{--modal-padding:1rem;--close-button-width:1.5rem;--close-button-height:2rem;left:50%;max-height:calc(100% - var(--gutter) - var(--gutter));max-width:calc(100% - var(--gutter) - var(--gutter));outline:none;padding:0;position:fixed;top:50%;transform:translate(-50%,-50%);width:500px}.modal__wrapper::backdrop{background:hsla(var(--background--secondary),.85)}.modal__header{background:linear-gradient(to bottom,hsla(var(--background),1),hsla(var(--background),0));height:1rem;margin-bottom:-1rem;position:sticky;top:0;z-index:1}.modal__close{background:hsl(var(--background));position:absolute;right:var(--modal-padding);top:var(--modal-padding);z-index:1}.modal__close::after{border-radius:inherit;box-shadow:0 0 0 .5rem hsl(var(--background));content:"";inset:0;pointer-events:none;position:absolute;z-index:-1}.modal__container{box-shadow:0 0 1rem 0 hsl(var(--background--secondary));padding:var(--modal-padding)}.modal__title{box-sizing:content-box;min-height:var(--close-button-height)}.modal__footer{background:linear-gradient(to top,hsla(var(--background),1),hsla(var(--background),0));bottom:0;height:1rem;margin-top:-1rem;position:sticky}