@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%;
  cursor: pointer;

  .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);

  .icon {
    color: var(--color-white); // icon color
  }

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

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

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

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

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

// 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;
}