@import "tailwindcss/theme";
@import "../variables/theme.css";
@import "../variables/root.css";

.modal {
  @apply m-auto overflow-hidden bg-white;

  width: 91.11%;
  max-width: 328px;
  max-height: 95.55%;
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-24)
    var(--spacing-24);

  @variant md {
    width: 86.66%;
    max-width: 520px;
    max-height: 86.66%;
  }

  @variant lg {
    width: 67.77%;
    max-width: 732px;
    max-height: 77.77%;
  }

  @variant backdrop {
    @apply bg-black/60;
  }
}

.modal-close {
  --icon-color: var(--color-neutral-900);

  @apply absolute z-10 p-0;
}

.modal-closeIcon {
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.modal-title {
  @apply text-neutral-900;

  font: var(--t3-bold);
}

.modal-subtitle {
  @apply text-neutral-900/60;

  margin-top: var(--spacing-4);
  font-size: var(--t4-medium);
}

.modal-text {
  @apply overflow-hidden text-neutral-700/60;

  margin-top: var(--spacing-16);
  font-size: var(--t5-medium);
}