.modal-view {
  $component-name: ".modal-view";

  display: none;
  position: fixed;
  z-index: $z-index-modal-view;
  left: 0;
  top: 0;
  width: 100vw;
  height: var(--window-inner-height, 100vh);
  background-color: color("overlay");



  &--visible {
    display: block;
  }

  // &--high {

    // margin-top: spacing($modal-view-margin-top-high, $subtract: spacing($modal-view-margin-top));
    // height: spacing($modal-view-margin-top-high, $times: -1, $add: var(--window-inner-height, 100vh));
    //
    // @include breakpoint("medium") {
    //   height: spacing($modal-view-margin-top-high, $times: -1, $add: var(--window-inner-height, 100vh));
    //   max-height: none;
    // }
    //
    // @include breakpoint("low-height") {
    //   height: spacing($modal-view-margin-top-low-height, $times: -1, $add: var(--window-inner-height, 100vh));
    //   max-height: none; //overwrite max height set in medium breakpoint
    //   margin-top: spacing($modal-view-margin-top-high, $subtract: spacing($modal-view-margin-top-low-height));
    // }
  // }

  &__wrapper {
    position: relative;
    margin: spacing($modal-view-margin-top) auto 0 auto;
    max-width: spacing($modal-view-padding-horizontal, $times: 2, $add: $line-width-max);

    @include breakpoint("low-height") {
      margin-top: spacing($modal-view-margin-top-low-height);
    }

    #{$component-name}--wide & {
      max-width: spacing($modal-view-padding-horizontal, $times: 2, $add: 46em);
    }

    #{$component-name}--high & {
      margin-top: spacing($modal-view-margin-top-high);
    }
  }

  &__container {
    position: relative;
    @include force-scroll-fullscreen-modal;
  }

  &__close {
    position: absolute;
    top: spacing($button-padding-vertical, $times: 2, $add: line-height("single", $include-calc: false), $divideby: -2);
    right: spacing($page-padding-side, $subtract: spacing($button-padding-vertical));
    z-index: $z-index-modal-view + 2;

    @include breakpoint("medium"){
      right: spacing($page-padding-side, $subtract: #{spacing($button-padding-vertical, $times: 2, $add: line-height("single", $include-calc: false), $divideby: 2)});
    }
  }

  &__body {
    background-color: color("background");
    box-shadow: $shadow-style-front color("shadow");
    overflow-y: auto; //must be scroll and not auto otherwise touch devices will scroll with page behind the modal-view
    -webkit-overflow-scrolling: touch;

    height: spacing($modal-view-margin-top, $times: -1, $add: var(--window-inner-height, 100vh));

    @include breakpoint("medium") {
      height: auto;
      max-height: spacing($modal-view-margin-top, $times: -1, $add: var(--window-inner-height, 100vh));
    }

    @include breakpoint("low-height") {
      height: spacing($modal-view-margin-top-low-height, $times: -1, $add: var(--window-inner-height, 100vh));
      max-height: none; //overwrite max height set in medium breakpoint
    }

    #{$component-name}--high & {
      height: spacing($modal-view-margin-top-high, $times: -1, $add: var(--window-inner-height, 100vh));

      @include breakpoint("medium") {
        max-height: spacing($modal-view-margin-top-high, $times: -1, $add: var(--window-inner-height, 100vh));
      }

      @include breakpoint("low-height") {
        height: spacing($modal-view-margin-top-low-height, $times: -1, $add: var(--window-inner-height, 100vh));
      }
    }
  }

  &__header {
    position: relative;
    margin: 0;
    padding: spacing($modal-view-padding-vertical) spacing($modal-view-padding-horizontal) spacing($modal-view-padding-header, $add: $width-border) spacing($modal-view-padding-horizontal);

    &::after {
      content: "";
      display: block;
      position: absolute;
      height: $width-border;
      bottom: 0;
      left: spacing($modal-view-padding-horizontal);
      right: spacing($modal-view-padding-horizontal);
      background-color: color("border");
    }

    &__secondary {
      @include set-font(0, "single");
      color: color("foreground-secondary");
      margin-top: spacing(-5);
    }

    #{$component-name}--boxed-content & {
      &::after {
        content: none;
      }

      & + #{$component-name}__content {
        padding-top: 0;
      }
    }

    &.theme--dark {
      position: static; //in order for line above header (::after) to be positioned relative to the modal view body and hence not scroll with the header
      padding-bottom: spacing($modal-view-padding-vertical);

      &::after {
        //when using a dark modal header a line is added at the top in narrow viewports to make sure the modal view and background a visually distinguishable (line is removed in wide viewports)
        content: "";
        top: 0;
        left: 0;
        right: 0;
        background-color: color("border");
        z-index: $z-index-modal-view + 1;
      }

      @include breakpoint("wide") {
        &::after {
          content: none;
        }
      }
    }
  }

  &__content {
    @include content-container;
    padding: spacing($modal-view-padding-header) spacing($modal-view-padding-horizontal) spacing($modal-view-padding-vertical) spacing($modal-view-padding-horizontal);

    .theme--dark + & {
      padding-top: spacing($modal-view-padding-vertical);
    }
  }
}

.page {
  &--blur {
    -o-filter: blur($overlay-blur);
    -ms-filter: blur($overlay-blur);
    -moz-filter: blur($overlay-blur);
    -webkit-filter: blur($overlay-blur);
    filter: blur($overlay-blur);
  }
}

dialog.modal-view {
  margin: 0;
  padding: 0;
  right: 0;
  border: 0;
  max-width: 100vw;
  max-height: 100vh;
}