@import '../scss/init.scss';

.dialogView {
  @include popup;
  display: flex;
  justify-content: center;

  padding-top: 24px;

  @include respondTo_page(md) {
    padding: 24px 40px;
  };

  &_front {
    max-width: $s_page_md;
    width: 100%;
    max-height: 100%;
    background: $c_bodyBg;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &_header {
      position: relative;
      z-index: 10;
    }

    &_body {
      flex: 1;
      position: relative;
      @include allowScroll('y');
    }

    opacity: 0;
    transform: translateY(20vh);
    transition: 300ms;

    @at-root .dialogView.is_active > & {
      opacity: 1;
      transform: translateY(0);

    }
  }

  &_background {
    background: $c_dialog_bg;
    opacity: 0;
    transition-duration: 300ms;

    @at-root .dialogView.is_active > & {
      opacity: 1;
    }
  }
}



.appContainer {
  transition: transform 300ms;
}

.is_dialogViewOpen {
  background-color: black;

  .appContainer {
    transform: scale(0.96);
    background-color: $c_bodyBg;
  }

  @include respondTo_page(md) {
    background-color: $c_bodyBg;

    .appContainer {
      transform: none;
    }
  };
}



.dialogView--transparentBg {
  .dialogView_background {
    background-color: transparent;
  }
}

.dialogView--lg {
  .dialogView_front {
    max-width: $s_page_lg;
  }
}

.dialogView--xlg {
  .dialogView_front {
    max-width: $s_page_xlg;
  }
}

.dialogView--fullWidth {
  .dialogView_front {
    max-width: 100%;
  }
}

.dialogView--allowScroll {
  .dialogView_front_body {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}