@import "variables";

$module-name: "meta-MetaWindow";

.#{$module-name} {
  position: fixed;

  // lightbox inner elements
  .meta-spinner--embed,
  .meta-spinner,
  .meta-error {
    align-items: center;
    display: none;
    justify-content: center;
    text-align: center;
    z-index: 2;
  }

  .meta-spinner--embed,
  .meta-spinner {
    @include spinner_style();

    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .meta-error {
    color: $clr-red;
    font-size: 1.5em;
    font-weight: bold;
  }

  .meta-spinner--embed {
    display: flex;
  }

  &-overlay {
    align-items: center;
    background: $meta-overlay-bg;
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 98;

    // meta states
    &--open {
      display: flex;
    }

    &--loading {
      .meta-spinner {
        display: flex;
      }
    }

    &--error {
      .meta-content {
        justify-content: center;
      }

      .meta-error {
        display: flex;
      }
    }
  }

  // navs
  .meta-nav {
    background: none;
    border: 0;
    color: $meta-nav-color;
    font-size: $meta-nav-size;
    text-shadow: $meta-nav-hover-shadow 0 0 0.25em;
    z-index: 2;

    @include hover-focus() {
      color: $meta-nav-color;
    }

    &:hover {
      background: $meta-nav-hover-bg;
      color: $meta-nav-hover-color;
      text-decoration: none;
      text-shadow: none;
    }
  }

  .meta-nav-arrow {
    align-items: center;
    bottom: 0;
    display: flex;
    font-size: $meta-nav-arrows-size;
    justify-content: center;
    padding: $meta-nav-padding;
    position: absolute;
    top: auto;
    z-index: 2;

    @include hover-focus() {
      .fa,
      .fas,
      .far,
      .fab {
        transform: $meta-nav-hover-transform;
      }
    }

    @media (min-width: map-get($grid-breakpoints, "lg")) {
      bottom: 0;
      top: 0;
    }

    &__next {
      right: 0;
    }

    &__prev {
      left: 0;
    }

    @media (min-width: map-get($grid-breakpoints, "lg")) {
      &__next {
        right: -($meta-nav-arrows-size + 0.5);
      }

      &__prev {
        left: -($meta-nav-arrows-size + 0.5);
      }
    }
  }

  .meta-close {
    position: absolute;
    right: 0;
    top: -3rem;
    width: 1.25em;

    &:hover {
      .fa,
      .fas,
      .far,
      .fab {
        transform: $meta-nav-close-hover-transform;
      }
    }

    @media (min-width: map-get($grid-breakpoints, "lg")) {
      right: -($meta-nav-arrows-size + 0.5);
      top: -($meta-nav-arrows-size + 0.5);
    }
  }

  .meta-content {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    z-index: 1;

    @media (min-width: map-get($grid-breakpoints, "md")) {
      height: 80%;
    }
    @media (min-width: map-get($grid-breakpoints, "lg")) {
      height: 90%;
      height: calc(90% - 3rem);
      width: 90%;
      width: calc(90% - 3rem);
    }
  }

  .meta-wrap {
    display: flex;
    height: 100%;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
    width: 100%;
    word-break: break-word;

    img {
      max-height: 100%;
      max-width: 100%;
      object-fit: cover;
    }
  }

  // Lightbox types

  &--text {
    .meta-content {
      background: $meta-text-wrapper-bg;
      color: $meta-text-wrapper-color;
      padding: $meta-text-wrapper-padding-height $meta-text-wrapper-padding-width;
      padding-right: 0;
    }

    .meta-wrap {
      padding-right: $meta-text-wrapper-padding-width;
    }
  }

  &--image,
  &--video {
    .typography,
    .meta-wrap {
      align-items: center;
      justify-content: center;
      min-height: 100%;
      overflow: hidden;

      img {
        margin: 0;
      }
    }
  }

  &--video,
  &--embed {
    @include responsive-ratio($meta-video-width, $meta-video-height, true);

    a[rel="nofollow noreferrer noopener"] {
      color: $meta-embed-loading-failed-color;
      font-size: $meta-embed-loading-failed-size;
      font-weight: $meta-embed-loading-failed-weight;

      &:before {
        content: "Unable to load. Please follow the provided link: ";
        display: block;
      }
    }

    iframe {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
}