:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  --neeto-ui-modal-spacing: 1.5rem;

  // Backdrop
  --neeto-ui-modal-backdrop-z-index: var(--neeto-ui-modal-z-index);
  --neeto-ui-modal-backdrop-bg-color: #1b1f23dd;
  --neeto-ui-modal-backdrop-backdrop-filter: blur(2px);

  // Wrapper
  --neeto-ui-modal-wrapper-width: 50%;
  --neeto-ui-modal-wrapper-max-width: 100%;
  --neeto-ui-modal-wrapper-height: auto;
  --neeto-ui-modal-wrapper-bg-color: rgb(var(--neeto-ui-white));
  --neeto-ui-modal-wrapper-border-radius: var(--neeto-ui-rounded-xl);
  --neeto-ui-modal-wrapper-backdrop-filter: blur(2px);

  // Close Button
  --neeto-ui-modal-close-btn-top: var(--neeto-ui-modal-spacing);
  --neeto-ui-modal-close-btn-right: var(--neeto-ui-modal-spacing);

  // Header
  --neeto-ui-modal-header-padding-top: var(--neeto-ui-modal-spacing);
  --neeto-ui-modal-header-padding-right: 4rem;
  --neeto-ui-modal-header-padding-bottom: 1rem;
  --neeto-ui-modal-header-padding-left: var(--neeto-ui-modal-spacing);

  // Header Description
  --neeto-ui-modal-header-description-margin-top: 0.5rem;
  --neeto-ui-modal-header-description-color: rgb(var(--neeto-ui-gray-700));

  // Body
  --neeto-ui-modal-body-padding-top: 0;
  --neeto-ui-modal-body-padding-bottom: var(--neeto-ui-modal-spacing);
  --neeto-ui-modal-body-padding-x: var(--neeto-ui-modal-spacing);
  --neeto-ui-modal-body-font-size: --neeto-ui-text-sm;
  --neeto-ui-modal-body-line-height: 1.5;

  // Footer
  --neeto-ui-modal-footer-padding-y: 1rem;
  --neeto-ui-modal-footer-padding-x: var(--neeto-ui-modal-spacing);
  --neeto-ui-modal-footer-bg: rgb(var(--neeto-ui-gray-100));
  --neeto-ui-modal-footer-border-radius: var(--neeto-ui-rounded-xl);
}

.neeto-ui-modal__backdrop {
  position: fixed;
  z-index: var(--neeto-ui-modal-backdrop-z-index);
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  justify-content: center;
  align-items: center;

  transition: var(--neeto-ui-transition);
  background-color: var(--neeto-ui-modal-backdrop-bg-color);
  backdrop-filter: var(--neeto-ui-modal-backdrop-backdrop-filter);

  .neeto-ui-modal__wrapper {
    width: var(--neeto-ui-modal-wrapper-width);
    max-width: var(--neeto-ui-modal-wrapper-max-width);
    height: var(--neeto-ui-modal-wrapper-height);
    position: relative;
    background-color: var(--neeto-ui-modal-wrapper-bg-color);
    border-radius: var(--neeto-ui-modal-wrapper-border-radius);
    opacity: 0;
    transform: scale(1.1);
    backdrop-filter: var(--neeto-ui-modal-wrapper-backdrop-filter);
    animation: showModalWrapper 0.3s forwards;

    @include viewport(mob) {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
    }

    @keyframes showModalWrapper {
      0% {
        opacity: 0;
        transform: scale(1.1);
        backdrop-filter: blur(2px);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        backdrop-filter: blur(0px);
      }
    }

    .neeto-ui-modal__close {
      position: absolute;
      top: var(--neeto-ui-modal-close-btn-top);
      right: var(--neeto-ui-modal-close-btn-right);
    }

    &.neeto-ui-modal__wrapper--small {
      --neeto-ui-modal-wrapper-width: 20rem;
    }

    &.neeto-ui-modal__wrapper--medium {
      --neeto-ui-modal-wrapper-width: 30rem;
    }

    &.neeto-ui-modal__wrapper--large {
      --neeto-ui-modal-wrapper-width: 45rem;
    }

    &.neeto-ui-modal__wrapper--fullscreen {
      --neeto-ui-modal-wrapper-width: 100%;
      --neeto-ui-modal-wrapper-max-width: 100vw;
      --neeto-ui-modal-wrapper-height: 100%;
      --neeto-ui-modal-wrapper-border-radius: var(--neeto-ui-rounded-none);
      --neeto-ui-modal-header-padding-top: 1.75rem;

      max-height: 100vh;
      transform: scale(1);
      animation: nuifadeIn 0s forwards;

      @include viewport(mob) {
        width: 100%;
      }
    }

    .neeto-ui-modal__header {
      padding: var(--neeto-ui-modal-header-padding-top) var(--neeto-ui-modal-header-padding-right) var(--neeto-ui-modal-header-padding-bottom)
        var(--neeto-ui-modal-header-padding-left);
      overflow-wrap: break-word;
    }

    .neeto-ui-modal__header-desc {
      margin-top: var(--neeto-ui-modal-header-description-margin-top);
      color: var(--neeto-ui-modal-header-description-color);
    }

    .neeto-ui-modal__body {
      padding: var(--neeto-ui-modal-body-padding-top) var(--neeto-ui-modal-body-padding-x) var(--neeto-ui-modal-body-padding-bottom);
      font-size: var(--neeto-ui-modal-body-font-size);
      line-height: var(--neeto-ui-modal-body-line-height);
      word-wrap: break-word;
    }

    .neeto-ui-modal__footer {
      text-align: right;
      background: var(--neeto-ui-modal-footer-bg);
      border-bottom-left-radius: var(--neeto-ui-modal-footer-border-radius);
      border-bottom-right-radius: var(--neeto-ui-modal-footer-border-radius);
      padding: var(--neeto-ui-modal-footer-padding-y) var(--neeto-ui-modal-footer-padding-x);
    }
  }
}

// CSS transition group

.neeto-ui-modal-enter {
  &.neeto-ui-modal__backdrop {
    opacity: 0;
    backdrop-filter: var(--neeto-ui-modal-backdrop-backdrop-filter);
  }
}
.neeto-ui-modal-enter-active,
.neeto-ui-modal-enter-done {
  &.neeto-ui-modal__backdrop {
    opacity: 1;
    backdrop-filter: var(--neeto-ui-modal-backdrop-backdrop-filter);
  }
}
.neeto-ui-modal-exit {
  &.neeto-ui-modal__backdrop {
    opacity: 1;
    backdrop-filter: var(--neeto-ui-modal-backdrop-backdrop-filter);
  }
}
.neeto-ui-modal-exit-active {
  &.neeto-ui-modal__backdrop {
    opacity: 0;
    backdrop-filter: var(--neeto-ui-modal-backdrop-backdrop-filter);
  }
}

.neetix-alert, .neetix-modal {
  --neeto-ui-modal-close-btn-top: 2rem;
  --neeto-ui-modal-close-btn-right: 2rem;
  --neeto-ui-modal-header-padding-top: 2rem;
  --neeto-ui-modal-header-padding-left: 2rem;
  --neeto-ui-modal-body-padding-bottom: 2rem;
  --neeto-ui-modal-body-padding-x: 2rem;
  --neeto-ui-modal-footer-padding-bottom: 2rem;
  --neeto-ui-modal-footer-padding-x: 2rem;
  --neeto-ui-modal-wrapper-border-radius: var(--neeto-ui-rounded-none);
}
