.modal {
$modal-width: 400px; $modal-padding: 30px; &__container { @include position(fixed, 0 0 0 0); background-color: rgba($black, 0.7); opacity: 0; transition: all 0.25s $CurveFastOutSlowIn; visibility: hidden; z-index: 99999; padding: 10px; @include media($desktop) { padding-top: 160px; } } &__inner { transform: scale(0.5); background-color: $white; margin: auto; max-height: 95%; overflow-y: auto; position: relative; border-radius: $base-border-radius; transition: all 0.25s $CurveFastOutSlowIn; max-width: $modal-width; width: 100%; box-shadow: 0 7px 8px -4px rgba($black, 0.1), 0 10px 20px 2px rgba($black, 0.1), 0 5px 47px 10px rgba($black, 0.12); } &--open &__container { opacity: 1; visibility: visible; } &--open &__inner { transform: scale(1); } &__header { display: flex; padding: $modal-padding; } &__close { cursor: pointer; margin: 0; border: 0; margin-left: auto; background: none; padding: 10px; position: absolute; top: 20px; right: 20px; border-radius: $base-border-radius; transition: background 0.3s ease; &:hover, &:active, &:focus { outline: none; background: rgba($black, 0.1); } } &__closeIcon { fill: rgba($black, 0.4); display: flex; } &__title { color: $heading-color; margin: 0; font-size: 20px; } &__content { padding: 0 $modal-padding $modal-padding; } &__centerMessage { text-align: center; font-size: 18px; margin-bottom: 20px; } &__iconContainer { @include size(100px); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba($primary-color, 0.2); margin: 0 auto 10px; } &__icon { @include size(64px); fill: $primary-color; } &__footer { display: flex; flex-direction: column; padding: 0 $modal-padding $modal-padding; } &__finePrint { font-size: 14px; margin-top: 20px; line-height: normal; } &__finePrintLink { font-size: 14px; }
}