@use '../base' as *;

/* -------------------------------- 

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information
Usage: codyhouse.co/license

-------------------------------- */

.modal {
  position: fixed;
  z-index: var(--z-index-overlay, 15); 
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;

  &:not(.modal--is-visible) {
    pointer-events: none;
    background-color: transparent;
  }
}

.modal--is-visible {
  opacity: 1;
  visibility: visible;
}

// close button
.modal__close-btn {
  display: flex;
  flex-shrink: 0;
  border-radius: 50%;
  transition: .2s;

  .icon {
    display: block;
    margin: auto;
  }
}

.modal__close-btn--outer { // close button - outside the modal__content
  width: 48px;
  height: 48px;
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: var(--z-index-fixed-element, 10); 
  background-color: alpha(var(--color-black), 0.9);
  transition: .2s;

  .icon {
    color: var(--color-white); // icon color
    transition: transform .3s var(--ease-out-back);
  }

  &:hover {
    background-color: alpha(var(--color-black), 1);

    .icon {
      transform: scale(1.1);
    }
  }
}

.modal__close-btn--inner { // close button - inside the modal__content
  --size: 32px;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  transition: .2s;

  .icon {
    color: inherit; // icon color
  }

  &:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md);
  }
}

// animations
:root {
  --modal-transition-duration: 0.2s; // fallback (i.e., unless specified differently in the variations 👇)
}

@media (prefers-reduced-motion: no-preference) {
  .modal--animate-fade {
    --modal-transition-duration: 0.2s;
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);

    &.modal--is-visible {
      transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s;
    }
  }

  .modal--animate-scale,
  .modal--animate-translate-up,
  .modal--animate-translate-down,
  .modal--animate-translate-right,
  .modal--animate-translate-left {
    --modal-transition-duration: .2s;
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);

    .modal__content {
      will-change: transform;
      transition: transform var(--modal-transition-duration) var(--ease-out);
    }

    &.modal--is-visible {
      transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s;

      .modal__content {
        transform: scale(1); // reset all transformations
      }
    }
  }

  .modal--animate-slide-up,
  .modal--animate-slide-down,
  .modal--animate-slide-right,
  .modal--animate-slide-left {
    --modal-transition-duration: 0.3s;
    transition: opacity 0s var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);

    .modal__content {
      will-change: transform;
      transition: transform var(--modal-transition-duration) var(--ease-out);
    }

    &.modal--is-visible {
      transition: background-color var(--modal-transition-duration), visibility 0s;

      .modal__content {
        transform: scale(1); // reset all transformations
      }
    }
  }

  // scale
  .modal--animate-scale {
    .modal__content {
      transform: scale(0.95);
    }
  }

  // translate
  .modal--animate-translate-up {
    .modal__content {
      transform: translateY(40px);
    }
  }

  .modal--animate-translate-down {
    .modal__content {
      transform: translateY(-40px);
    }
  }

  .modal--animate-translate-right {
    .modal__content {
      transform: translateX(-40px);
    }
  }

  .modal--animate-translate-left {
    .modal__content {
      transform: translateX(40px);
    }
  }

  // slide
  .modal--animate-slide-up {
    .modal__content {
      transform: translateY(100%);
    }
  }

  .modal--animate-slide-down {
    .modal__content {
      transform: translateY(-100%);
    }
  }

  .modal--animate-slide-right {
    .modal__content {
      transform: translateX(-100%);
    }
  }

  .modal--animate-slide-left {
    .modal__content {
      transform: translateX(100%);
    }
  }
}

// load content - optional
.modal--is-loading {
  .modal__content {
    visibility: hidden;
  }

  .modal__loader {
    display: flex;
  }
}

.modal__loader { // loader icon
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: none;
  pointer-events: none;
}