.modal-container {
    display: flex;
    position: fixed;
    padding-top: 4rem;
    left: 0;
    overflow: auto;
    right: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    align-items: flex-start;
    justify-content: center;
    background-color: rgba(51, 56, 58, 0.5);
    z-index: -10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal-container.open {
    z-index: 100;
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
}

.modal-group {
    max-width: 700px;
    position: relative;
    height: auto;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    padding: var(--space-sm);
    border: 1px solid var(--color-alloy);
    box-sizing: border-box;
    box-shadow: var(--elevation-xl);
    border-radius: 4px;
    display: flex;
    transform: translateY(20%);
    opacity: 0;
    transition: all .25s ease;
}

.modal-container.open .modal-group {
    opacity: 1;
    transform: translateX(0);
    transition: all .25s ease;
}

.modal-group .button-container {
    display: flex;
}

.modal-group .button-container * {
    margin-right: var(--space-xs);
}

.modal-group .modal-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-group .modal-header h4 {
    margin: 0;
    padding-top: 0;
}

.modal-group .modal-content {
    margin: var(--space-sm) 0;
}

.modal-group .modal-close-button {
    cursor: pointer;
    position: absolute;
    right: var(--space-sm);
    top: var(--space-sm);
    padding: 0;
    z-index: 1;
}