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