[data-modal] {}
[data-modal-content] {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 0;
opacity: 0;
background-color: rgba(0, 0, 0, .25);
display: flex;
justify-content: center;
align-items: center;
transition: opacity .2s .1s, height 0s .3s;
}
[data-modal-content].is-open {
opacity: 1;
height: 100%;
transition: opacity .2s, height 0s;
}
[data-modal-content]:before {
position: relative;
}
[data-modal-content-inner] {
opacity: 0;
transition: opacity .2s;
}
[data-modal-content].is-open [data-modal-content-inner] {
opacity: 1;
transition: opacity .2s .1s;
}
[data-modal-close] {
cursor: pointer;
}