.modal { bottom: 0; left: 0; right: 0; top: 0; align-items: center; display: none; flex-direction: column; justify-content: center; overflow: hidden; position: fixed; z-index: 40; &.is-visible { display: flex; } .modal-background { background-color: rgba(10,10,10,.86); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .modal-card { position: relative; width: 300px; margin: 0 auto; display: flex; flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; @include respond-to("small-up") { width: 560px; } @include respond-to("medium-up") { width: 980px; } @include respond-to("large-up") { width: 1200; } header, footer { align-items: center; background-color: var(--bg-light-color); display: flex; flex-shrink: 0; justify-content: flex-start; padding: 0.75rem; position: relative; } header { border-bottom: 1px solid var(--default-hl-color); border-top-left-radius: 6px; border-top-right-radius: 6px; justify-content: space-between; font-size: 1.5rem; button { user-select: none; background-color: rgba(10,10,10,.2); border: none; border-radius: 9999px; cursor: pointer; pointer-events: auto; display: inline-block; flex-grow: 0; flex-shrink: 0; font-size: 0; height: 20px; max-height: 20px; max-width: 20px; min-height: 20px; min-width: 20px; outline: none; position: relative; width: 20px; &::before, &::after { background-color: var(--default-color); content: ""; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transform-origin: center center; } &::before { height: 2px; width: 50%; } &::after { height: 50%; width: 2px; } } } section { background-color: var(--default-color); flex-grow: 1; flex-shrink: 1; overflow: auto; padding: 20px; } footer { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top: 1px solid var(--default-hl-color); .button:not(:last-child) { margin-right: .5em; } } } }