.modal {
position: fixed; display: none; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; outline: 0; overflow-y: auto; z-index: 999;
}
.modal__inner {
flex: 0 1 auto; position: relative; margin: 1.875em; width: auto; max-width: 768px; outline: 0; opacity: 0; transform: translateY(200px); transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1050;
}
.modal__content {
position: relative; padding: 2rem 2.5rem; display: flex; flex-direction: column; background-color: $bg-color; border-radius: 4px; h1 { text-align: center; }
}
.modal__close-button {
position: absolute; top: 16px; right: 16px; background-color: transparent; border: 0; outline: 0; color: $heading-color; cursor: pointer; &:hover { background-color: transparent; }
}
.modal__overlay {
position: fixed; display: none; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 1040; opacity: 0; background-color: rgba(0, 0 , 0, .75); transition: opacity 1s ease 0.1s;
}
body.modal–open {
overflow: hidden;
}