@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;
  min-height: 465px;
  max-height: 95.55%;
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-24)
    var(--spacing-24);

  @layer utilities{

    @media (min-width: 768px);
  }

  @layer utilities{

    @media (min-width: 1024px);
  }

  @layer utilities{

    @media (backdrop-filter: blur(1px));
  }
}

.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 text-neutral-700/60;

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