// ============================================================================
// :: Overlay
// ============================================================================
/**
 * Scope defined for styling the visual representation of an overlay.
 */

// ============================================================================
// :: Root
// ============================================================================
.s-overlay {
  .o-overlay {
    position: relative;

    height: 50rem;

    opacity: 1;
    box-shadow: 0 0 3rem rgba(0, 0, 0, 0.12);

    transform: translateX(0) translateY(0);
  }

  .o-overlay__background {
    opacity: 1;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.s-overlay--right,
.s-overlay--bottom {
  .o-overlay__content {
    background-color: $bp-background-color-base;

    transform: translateX(0) translateY(0) !important;
  }
}

.s-overlay--center {
  .o-overlay__content {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .o-overlay__content-container {
    > * {
      background-color: $bp-background-color-base;

      @include respond-at($bp-breakpoint-tablet-base) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60rem;
        height: 25rem;
      }
    }
  }
}