// ============================================================================
// :: Overlay
// ============================================================================
/**
 * Overlay component that displays a model over the entire page. It has a content
 * element that decides where on the screen the content within the overlay component
 * is shown.
 */

// ============================================================================
// :: Root
// ============================================================================
.o-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $z-index-atmosphere + 2;

  opacity: 0;

  transition: opacity 0s ease-in-out 0.5s;

  pointer-events: none;

  @include respond-at($breakpoint-tablet-default) {
    z-index: $z-index-atmosphere;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.o-overlay__background {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  opacity: 0;
  background-color: rgba($background-color-dark, 0.55);

  transition: opacity 0.5s ease-in-out;
}

.o-overlay__content {
  position: relative;
  z-index: $z-index-roof;

  display: flex;
  flex-direction: column;
  height: 100%;

  opacity: 0;

  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.o-overlay__content-container {
  position: relative;

  height: 100%;
  overflow: auto;

  background-color: $background-color-white;
  box-shadow: $box-shadow-base;
}

.o-overlay__footer-container {
  position: relative;
  z-index: $z-index-roof;

  width: 100%;
  padding: 2rem 0;

  background-color: $background-color-white;
  box-shadow: 2px 4px 30px 0 $shadow-color-base;
}

.o-overlay__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: $z-index-roof;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.o-overlay--right {
  .o-overlay__content {
    width: 100%;

    opacity: 1;

    transform: translateY(100%);

    @include respond-at($breakpoint-tablet-default) {
      max-width: 80rem;

      margin-left: auto;

      transform: translateX(100%);
    }
  }
}

.o-overlay--center {
  display: flex;
  justify-content: center;
  align-items: center;

  .o-overlay__content {
    width: 100%;
    max-width: calc(100% - #{$container-spacing-mobile-default * 2});
    height: auto;

    opacity: 0;

    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;

    @include respond-at($breakpoint-tablet-default) {
      max-width: 84rem;

      transform: translateY(2rem);
    }
  }

  .o-overlay__content-container {
    width: 100%;
    max-height: calc(100vh - #{$container-spacing-mobile-default * 2});

    border-radius: $border-radius-1x-large;
  }

  // When container is used within an center overlay, the spacing needs to be adjusted
  .l-container {
    max-width: calc(#{$container-width-default} - #{$container-spacing-mobile-default * 2});
  }
}

.o-overlay--full-width {

  .o-overlay__content,
  .o-overlay__content-container {
    width: 100%;
    height: 100%;
  }

  .o-overlay__content {
    opacity: 0;

    transition: opacity 0.5s ease-in-out;
  }
}

.o-overlay--bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;

  .o-overlay__content {
    width: 100%;
    max-height: 100%;
    height: auto;

    opacity: 1;

    transform: translateY(100%);
  }

  .o-overlay__content-container {
    height: auto;
  }

  .o-overlay__close {
    &:focus {
      width: 10%;
      margin: 0 auto;
      outline-offset: 0.5rem;
    }

    @extend %__icon-chevron-down;

    position: relative;
    z-index: $z-index-roof;

    width: 100%;
    height: 4.5rem;

    top: 0;
    right: 0;

    background-color: transparent;
    border: none;

    cursor: pointer;

    &::after,
    &::before {
      position: absolute;
    }

    &::before {
      bottom: -0.5rem;
      left: 50%;
      transform: translateX(-50%);
    }

    &::after {
      content: "";

      bottom: 0;
      left: 0;
      z-index: $z-index-pit;

      width: 100%;
      height: 1.5rem;

      background-image: url("/assets/general/img/overlay/shape.svg");
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: contain;
    }
  }
}

.o-overlay--loader {
  .o-overlay__content {
    width: auto;
  }

  .o-overlay__content-container {
    padding: 3rem;
  }
}

// ============================================================================
// :: States
// ============================================================================
.o-overlay {
  &.is-open {
    opacity: 1;

    pointer-events: auto;

    transition: opacity 0s ease-in-out;

    .o-overlay__background {
      opacity: 1;
    }

    .o-overlay__content {
      opacity: 1;
    }
  }

  .o-overlay__background {
    &.is-hidden {
      opacity: 0;
    }
  }
}

.o-overlay--right,
.o-overlay--bottom {
  &.is-open {
    .o-overlay__content {
      transform: translateY(0);

      @include respond-at($breakpoint-tablet-default) {
        transform: translateX(0);
      }
    }
  }
}

.o-overlay--center {
  &.is-open {
    .o-overlay__content {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.o-overlay--full-width {
  &.is-open {
    .o-overlay__content {
      opacity: 1;
    }
  }
}

html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .o-overlay__close {
    &::before {
      bottom: -1.25rem;
    }
  }
}