/*
 * Modal component
 *
 */

@use '../../../style/core/utilities.scss' as utilities;

@mixin modalFullscreen() {
  width: 100%;
  height: 100vh;
  max-width: 100%;
  max-height: 100vh;

  border-radius: 0;
  box-shadow: none;
}

@keyframes show-modal {
  from {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes hide-modal {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(0, 1rem, 0);
    opacity: 0;
  }
}

@keyframes show-drawer {
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes hide-drawer-left {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(-20rem, 0, 0);
    opacity: 0;
  }
}

@keyframes hide-drawer-top {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(0, -20rem, 0);
    opacity: 0;
  }
}

@keyframes hide-drawer-bottom {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(0, 20rem, 0);
    opacity: 0;
  }
}

@keyframes hide-drawer-right {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(20rem, 0, 0);
    opacity: 0;
  }
}

@keyframes show-modal-overlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hide-modal-overlay {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@mixin modalReducedMotion() {
  @include utilities.reducedMotion() {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

// Mixin for sticky navigation bar with drop shadow
// Used by Dialog and Drawer components
@mixin modalStickyNav() {
  // Sticky navigation bar
  &--spacing &__navigation.dnb-section {
    position: sticky;
    top: 0;
    left: 0; // prevent horizontal scroll when content is wider
    z-index: 99; // below dropdowns and date-pickers
  }

  // Elevated z-index when scrolled (sticky)
  &--spacing &__navigation.dnb-section#{&}__navigation--sticky {
    z-index: 2999; // above dropdowns and date-pickers, below modal
  }

  // Drop shadow appears when sticky and scrolled
  & &__navigation--sticky {
    &::before {
      content: '';
      position: absolute;
      z-index: -1;
      left: 0;
      right: 0;
      bottom: 0;

      @include utilities.defaultDropShadow();
    }
  }

  // Remove shadow when not sticky
  & &__navigation:not(#{&}__navigation--sticky) {
    &::after {
      color: transparent;
    }
  }
}