.modal--media {
  background: transparent;
  display: flex;
  justify-content: center;
  opacity: 0;
  overflow-y: auto;
  transition: background-color $transition-duration--fast,
    opacity $transition-duration--fast, visibility $transition-duration--fast;
  z-index: 10;

  &.modal--active {
    background: $color-alpha--two-70;
    opacity: 1;
  }

  .modal__aspect-ratio {
    align-items: center;
    display: flex;
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .modal__close {
    position: fixed;
    right: $icon-size--l;
    top: $icon-size;
    z-index: 1;

    &,
    & .icon {
      height: $icon-size;
      width: $icon-size;
    }

    .icon {
      right: 0;
    }
  }

  .modal__media {
    flex: 1;
  }
}

@include viewport--l {
  .modal--media {
    .modal__close {
      right: $icon-size--l;
      top: $icon-size--l;

      &,
      & .icon {
        height: $icon-size--l;
        width: $icon-size--l;
      }
    }
  }
}

// if modal media height exceeds viewport height scale proportionally
.modal--media {
  // 16:9
  @media (min-width: 177.778vh) {
    .modal__aspect-ratio--16-9 {
      width: calc(100vh * 16 / 9);
    }
  }
  // 4:3
  @media (min-width: 133.333vh) {
    .modal__aspect-ratio--4-3 {
      width: calc(100vh * 4 / 3);
    }
  }
  // 3 : 2
  @media (min-width: 150vh) {
    .modal__aspect-ratio--3-2 {
      width: calc(100vh * 3 / 2);
    }
  }
}

// background mapping
@include overlays-modal-background-mapping;