Making a Bare Minimum Modal in HTML and CSS

Here is the code for a bare minimum popup modal:

HTML

1<div aria-hidden="false" role="dialog" className="modal">
2  <div className="modal__container">
3    <div className="modal__header">
4          Header
5     </div>
6     <div className="modal__content">
7          Content
8     </div>
9     <div className="modal__footer">
10          Footer
11     </div>
12   </div>
13   <div className="modal-backdrop">
14   </div>
15</div>
16

CSS

1.modal {
2  position: fixed;
3  top: 0;
4  right: 0;
5  bottom: 0;
6  left: 0;
7  z-index: 9001;
8  &__container {
9    position: relative;
10    display: flex;
11    -webkit-box-orient: vertical;
12    -webkit-box-direction: normal;
13    flex-direction: column;
14    -webkit-box-pack: center;
15    justify-content: center;
16    margin: auto;
17    padding: 3rem;
18    border-radius: .25rem;
19    width: 50%;
20    max-width: 40rem;
21    min-width: 20rem;
22    height: 100%;
23  }
24  &__header {
25    flex-shrink: 0;
26    border: 1px solid black;
27  }
28  &__content {
29    padding-top: 2rem;
30    padding: 1rem;
31    overflow: hidden;
32    overflow-y: auto;
33    border: 1px solid black;
34  }
35  &__footer {
36    border-top: 2px solid grey;
37    border-bottom-right-radius: .25rem;
38    border-bottom-left-radius: .25rem;
39    padding: .75rem;
40    text-align: right;
41    border: 1px solid black;
42  }
43  &-backdrop {
44    position: fixed;
45    top: 0;
46    right: 0;
47    bottom: 0;
48    left: 0;
49    width: 100%;
50    height: 100%;
51    z-index: 9000;
52    visibility: visible;
53    opacity: 1;
54  }
55}
56