.modal{will-change:visibility,opacity;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;z-index:9999;visibility:hidden;opacity:0;transition:all .5s cubic-bezier(0.23,1,0.32,1);transition-delay:$modal-delay}.modal--active{visibility:visible;opacity:1}.modal--align-top{align-items:flex-start;margin-top:15vh}.modal__bg{background:transparent}.modal__dialog{max-width:600px;padding:1.2rem}.modal__content{will-change:transform,opacity;position:relative;padding:2.4rem;background:#fff;background-clip:padding-box;box-shadow:0 12px 15px 0 rgba(0,0,0,0.25);opacity:0;transition:all .25s cubic-bezier(0.23,1,0.32,1)}.modal__content--active{opacity:1}.modal__close{z-index:1100;cursor:pointer}.modal__trigger{position:relative;display:inline-block;padding:1.2rem 2.4rem;color:rgba(0,0,0,0.7);line-height:1;cursor:pointer;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.26);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .5s cubic-bezier(0.23,1,0.32,1)}.modal__trigger--active{z-index:10}.modal__trigger:hover{background:#e5d3d6}#modal__temp{will-change:transform,opacity;position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;transform:none;opacity:1;transition:opacity .1s ease-out,transform .5s cubic-bezier(0.23,1,0.32,1)}.demo-close{position:absolute;top:0;right:0;margin:10px;padding:.2rem;background:rgba(0,0,0,0.3);border-radius:50%;transition:all .5s cubic-bezier(0.23,1,0.32,1)}.demo-close svg{width:24px;fill:#fff;pointer-events:none;vertical-align:top}.demo-close:hover{background:rgba(0,0,0,0.6)}