.c-dialog { text-align: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none; overflow: auto; z-index: 9500; align-items: center; justify-content: center; font-family: $font; .o-backdrop { display: none; z-index: 1; } &:not(&--large, &--fullscreen) { h1 { @include inuit-font-size(22px, 26px); } } &--small-heading { h1 { @include inuit-font-size(22px, 26px); } } &--active { display: flex; .o-backdrop { display: block; animation-name: fadeIn; animation-duration: 0.8s; } } &__content { overflow: hidden; height: 0; visibility: hidden; position: relative; z-index: 2; color: $primary-color; @include mq(tablet) { min-width: 20rem; } @include font-size(18px); } &--active &__content { background-color: $brand-color--lighter; box-shadow: 0 0 30px rgba($black, 0.2); padding: $spacing--large $spacing; @include mq($until: tablet) { padding-left: 20px; padding-right: 20px; } animation-name: zoomIn; animation-duration: 0.3s; overflow: auto; height: 100vh; width: 100vw; -webkit-overflow-scrolling: touch; .c-tabs { margin-left: 0; } @include mq(tablet) { width: 90%; max-height: 85vh; // margin: 0 auto; padding: $spacing--medium; max-width: 613px; min-width: 613px; width: auto; opacity: 1; animation-name: fadeInBottomFixed; height: auto; } visibility: visible; } &--active &__close { display: block; float: right; position: relative; z-index: 3; background: transparent; border: none; color: $brand-color; @include font-size(20px); font-weight: $font-weight-normal; padding: 0; box-shadow: $link; height: 25px; @include mq($until: tablet) { + * { margin-top: $spacing--large; } } cursor: pointer; &:hover { box-shadow: $link--hover; } } &--large &__content { max-width: 970px; width: 970px; @include mq($until: 970px) { max-height: 100vh; min-height: 100vh; } } &--medium &__content { max-width: 790px; width: 790px; @include mq($until: 790px) { max-height: 100vh; min-height: 100vh; } } &--fullscreen &__content { @include mq(tablet) { height: 100vh; width: 90vw; max-width: 90vw; .c-figure-license__img { max-height: 85vh; max-height: 85vh; width: auto; margin: auto; } } } } /* Hack for fixing top padding on devices where had to add position fixed to to prevent scrolling on background */ html.scrollFix .c-dialog--active .c-dialog__content { padding-top: $spacing--large; }