modal.min.css

:root{--ui-modal-z-index: 1000;--ui-modal-view-offset-x: 1rem;--ui-modal-view-offset-y: 1rem;--ui-modal-width: auto;--ui-modal-min-width: 0px;--ui-modal-max-width: max-content;--ui-modal-max-height: 100%;--ui-modal-padding: 1rem;--ui-modal-content-padding: 0.5rem 0;--ui-modal-header-spacing: 0.5rem;--ui-modal-footer-spacing: 0.5rem;--ui-modal-backdrop-color: rgba(0, 0, 0, 0.9);--ui-modal-background-color: white;--ui-modal-border: none;--ui-modal-transition: 0.3s ease;--ui-modal-outer-scroll-view-offset-x: 1rem;--ui-modal-outer-scroll-view-offset-y: 1rem;--ui-modal-outer-scroll-max-width: 600px}.ui-modal{z-index:var(--ui-modal-z-index);position:fixed;top:0;left:0;width:100%;height:100%;opacity:1;transition:var(--ui-modal-transition)}.ui-modal::before{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ui-modal-backdrop-color);content:""}.ui-modal:not([data-state=open]){pointer-events:none;height:0;opacity:0}.ui-modal__wrap{position:absolute;top:var(--ui-modal-view-offset-y);right:var(--ui-modal-view-offset-x);bottom:var(--ui-modal-view-offset-y);left:var(--ui-modal-view-offset-x)}.ui-modal__button{margin:auto}.ui-modal__button:first-child:not(:last-child){margin:0 auto 0 0}.ui-modal__button:last-child:not(:first-child){margin:0 0 0 auto}.ui-modal__dialog{position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;flex-direction:column;padding:var(--ui-modal-padding);width:var(--ui-modal-width);min-width:var(--ui-modal-min-width);max-width:var(--ui-modal-max-width);max-height:var(--ui-modal-max-height);background-color:var(--ui-modal-background-color);border:var(--ui-modal-border)}.ui-modal__dialog-header{display:flex;justify-content:space-between;margin-bottom:var(--ui-modal-header-spacing);width:100%}.ui-modal__dialog-footer{margin-top:var(--ui-modal-footer-spacing);width:100%}.ui-modal__dialog-title{display:block;margin:0}.ui-modal__dialog-controls{display:flex;flex-wrap:nowrap}.ui-modal__dialog-wrap,.ui-modal__dialog-scrollable{width:100%;flex-grow:1}.ui-modal__dialog-scrollable{overflow:auto}.ui-modal__dialog-content{padding:var(--ui-modal-content-padding)}.ui-modal--outer-scroll{--ui-modal-view-offset-y: var(--ui-modal-outer-scroll-view-offset-y);--ui-modal-view-offset-x: var(--ui-modal-outer-scroll-view-offset-x);--ui-modal-max-width: var(--ui-modal-outer-scroll-max-width)}.ui-modal--outer-scroll .ui-modal__wrap{overflow:auto}.ui-modal--outer-scroll .ui-modal__dialog{position:relative;margin:auto;top:auto;left:auto;transform:none;max-height:none}.ui-modal--outer-scroll .ui-modal__dialog-scrollable{overflow:initial}