1$modal-z: 40 !default 2 3$modal-background-background-color: rgba($black, 0.86) !default 4 5$modal-content-width: 640px !default 6$modal-content-margin-mobile: 20px !default 7$modal-content-spacing-mobile: 160px !default 8$modal-content-spacing-tablet: 40px !default 9 10$modal-close-dimensions: 40px !default 11$modal-close-right: 20px !default 12$modal-close-top: 20px !default 13 14$modal-card-spacing: 40px !default 15 16$modal-card-head-background-color: $background !default 17$modal-card-head-border-bottom: 1px solid $border !default 18$modal-card-head-padding: 20px !default 19$modal-card-head-radius: $radius-large !default 20 21$modal-card-title-color: $text-strong !default 22$modal-card-title-line-height: 1 !default 23$modal-card-title-size: $size-4 !default 24 25$modal-card-foot-radius: $radius-large !default 26$modal-card-foot-border-top: 1px solid $border !default 27 28$modal-card-body-background-color: $white !default 29$modal-card-body-padding: 20px !default 30 31.modal 32 @extend %overlay 33 align-items: center 34 display: none 35 flex-direction: column 36 justify-content: center 37 overflow: hidden 38 position: fixed 39 z-index: $modal-z 40 // Modifiers 41 &.is-active 42 display: flex 43 44.modal-background 45 @extend %overlay 46 background-color: $modal-background-background-color 47 48.modal-content, 49.modal-card 50 margin: 0 $modal-content-margin-mobile 51 max-height: calc(100vh - #{$modal-content-spacing-mobile}) 52 overflow: auto 53 position: relative 54 width: 100% 55 // Responsiveness 56 +tablet 57 margin: 0 auto 58 max-height: calc(100vh - #{$modal-content-spacing-tablet}) 59 width: $modal-content-width 60 61.modal-close 62 @extend %delete 63 background: none 64 height: $modal-close-dimensions 65 position: fixed 66 right: $modal-close-right 67 top: $modal-close-top 68 width: $modal-close-dimensions 69 70.modal-card 71 display: flex 72 flex-direction: column 73 max-height: calc(100vh - #{$modal-card-spacing}) 74 overflow: hidden 75 -ms-overflow-y: visible 76 77.modal-card-head, 78.modal-card-foot 79 align-items: center 80 background-color: $modal-card-head-background-color 81 display: flex 82 flex-shrink: 0 83 justify-content: flex-start 84 padding: $modal-card-head-padding 85 position: relative 86 87.modal-card-head 88 border-bottom: $modal-card-head-border-bottom 89 border-top-left-radius: $modal-card-head-radius 90 border-top-right-radius: $modal-card-head-radius 91 92.modal-card-title 93 color: $modal-card-title-color 94 flex-grow: 1 95 flex-shrink: 0 96 font-size: $modal-card-title-size 97 line-height: $modal-card-title-line-height 98 99.modal-card-foot 100 border-bottom-left-radius: $modal-card-foot-radius 101 border-bottom-right-radius: $modal-card-foot-radius 102 border-top: $modal-card-foot-border-top 103 .button 104 &:not(:last-child) 105 margin-right: 10px 106 107.modal-card-body 108 +overflow-touch 109 background-color: $modal-card-body-background-color 110 flex-grow: 1 111 flex-shrink: 1 112 overflow: auto 113 padding: $modal-card-body-padding 114