.dialog{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000bf;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease 1s}.dialog.is-open{pointer-events:auto;opacity:1}.dialog.is-open .dialog-content{top:50%}.dialog-content{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:4px;min-width:300px;max-width:420px;width:90%;transition:all .5s ease 1s}@media screen and (min-width: 550px){.dialog-content{width:100%}}.dialog-content-header{display:flex;justify-content:space-between;align-items:center;position:relative;padding:10px 15px;border-top-left-radius:4px;border-top-right-radius:4px;background-color:#000;color:#fff;h2 {font-size: 1.2rem; font-weight: 500;} button {position: relative; display: block; font-size: 16px; font-weight: 500; width: 30px; height: 30px; min-height: auto; background-color: transparent; &:before,&:after {content: ""; display: block; width: 16px; height: 1px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transform-origin: center center;} &:before {transform: translate(-50%,-50%) rotate(45deg);} &:after {transform: translate(-50%,-50%) rotate(-45deg);}}}