/*
 * Modal component
 *
 */

@import '../../../style/core/utilities.scss';
@import './modal-mixins.scss';

:root {
  --modal-z-index: 3000;
  --modal-animation-duration: 300ms;
}

html[data-dnb-modal-active] {
  user-select: none;
  .eufemia-portal-root {
    user-select: text;
  }
}

.dnb-modal {
  &__content {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--modal-z-index) + 1);

    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100vw;
    width: 100%;
    height: 100%;

    &--auto-fullscreen {
      @include allBelow(small) {
        height: auto;
      }
    }

    &--fullscreen {
      align-items: flex-start;
      justify-content: flex-start;
    }

    // Is this used?
    &--fullscreen &__content {
      height: auto;
    }

    &--left,
    &--top {
      align-items: flex-start;
      justify-content: flex-start;
    }
    &--right {
      align-items: flex-start;
      justify-content: flex-end;
    }
    &--bottom {
      align-items: flex-end;
      justify-content: flex-start;
    }
  }

  &__vertical-alignment--top {
    padding-top: 5vh;
    align-items: flex-start;
  }

  &__overlay {
    position: fixed;
    z-index: var(--modal-z-index);
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
  }

  &-root__inner &__overlay {
    animation: hide-modal-overlay var(--modal-animation-duration) ease-out
      forwards;
  }

  &-root__inner:last-of-type &__overlay {
    animation: show-modal-overlay var(--modal-animation-duration) ease-out;

    &--hide {
      animation: hide-modal-overlay var(--modal-animation-duration)
        ease-out forwards;
    }
  }

  /* stylelint-disable-next-line */
  html[data-visual-test] &__overlay,
  &__overlay--no-animation {
    animation-delay: 0ms !important;
    animation-duration: 0ms !important;
  }

  @include reducedMotion() {
    &__overlay {
      animation-duration: 0.01ms !important;
    }
  }

  &-root__inner {
    position: relative;
    z-index: calc(var(--modal-z-index) + 1);
  }
  &-root__inner ~ &-root__inner {
    z-index: calc(var(--modal-z-index) + 2);
  }
  &-root__inner ~ &-root__inner ~ &-root__inner {
    z-index: calc(var(--modal-z-index) + 3);
  }
  &-root__inner ~ &-root__inner ~ &-root__inner ~ &-root__inner {
    z-index: calc(var(--modal-z-index) + 4);
  }
  &__close-button {
    z-index: calc(var(--modal-z-index) + 1);
  }

  &__header__bar {
    &.dnb-section {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}