.backdrop {
  @apply -z-1 opacity-0 overflow-y-auto flex items-start justify-center absolute inset-0 bg-black/20 backdrop-filter backdrop-blur-[2px] transition-all duration-200 ease-in-out;
}

.modal-wrap {
  @apply fixed inset-0 flex items-center justify-center -z-1 h-screen overflow-hidden transition-all duration-200 ease-in-out;
  &.is-opened {
    @apply z-[201];
    .backdrop, .modal {
      @apply z-10 opacity-100;
    }
  }
  &:is(.modal-right) {
    @apply justify-end;
    .modal {
      @apply flex flex-col relative -right-full m-0 w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 duration-400;
      .modal-footer {
        @apply mt-auto;
      }
    }
    &.is-opened {
      .modal {
        @apply z-10 right-0 opacity-100;
      }
    }
  }
  &:is(.modal-left) {
    @apply justify-start;
    .modal {
      @apply flex flex-col relative -left-full m-0 h-full w-10/12 sm:w-8/12 md:w-6/12 lg:w-5/12 duration-400;
      .modal-footer {
        @apply mt-auto;
      }
    }
    &.is-opened {
      .modal {
        @apply z-10 left-0 opacity-100;
      }
    }
  }
  &:is(.modal-cta) {
    .modal {
      @apply overflow-hidden rounded-lg shadow-2xl p-0 flex flex-wrap m-4 h-fit md:h-[30rem] w-11/12 sm:w-10/12 md:w-8/12;
      .modal-image {
        @apply basis-4/12 w-4/12 hidden sm:inline-block object-cover object-center;
        img { @apply h-full; }
      }
      .modal-content {
        @apply flex-1 p-8 relative;
      }
      .modal-close {
        @apply absolute right-2 top-2 z-10 rounded-full p-1 text-gray-600 hover:text-white hover:bg-red-500 inline-block transition-all duration-300 ease-in-out;
      }
    }
  }
}

.modal {
  @apply max-h-[95%] overflow-y-auto my-10 w-10/12 sm:w-8/12 md:w-6/12 lg:w-4/12 relative z-20 bg-white rounded p-8 opacity-0 transition-all duration-200 ease-in-out;
  .modal-head {
    .modal-title {
      @apply font-semibold;
    }
    @apply flex flex-wrap items-center justify-between mb-4 pb-4 border-b border-gray-100;
    .modal-close {
      @apply hover:text-red-500;
    }
  }
}

.modal-footer {
  @apply space-x-4 flex flex-wrap justify-end border-t border-gray-100 mt-4 pt-4;
}

.dialog {
  @apply w-full relative z-1 p-8 shadow-base;
}