@import 'colors.scss';
.modal-bg {
display: none;
position: fixed;
height: 100%;
width: 100%;
background-color: black;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.modal-bg.visible {
display: block;
}
.modal-wrapper {
display: none;
z-index: 4;
margin: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.modal-wrapper.visible {
display: flex;
}
.modal {
background: $background;
border: 1px solid black;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.modal-content {
padding: 30px;
max-height: 85vh;
overflow: auto;
box-sizing: border-box;
}
.modal-close {
position: absolute;
float: right;
cursor: pointer;
padding: 2px;
}
.modal-close:hover {
color: red;
}