.ga-modal__backdrop {
  @apply fixed inset-0 z-50 bg-(--ga-color-miscellaneous-overlay);
}

.ga-modal__container {
  @apply fixed inset-0 z-50 flex items-start justify-center;

  .ga-modal {
    @apply mt-16;
  }
}

.ga-modal {
  /* TODO: tailwindcss doesn't like empty spaces for arbitary values, turning off prettier for now to work */
  /* prettier-ignore */
  @apply text-md max-h-[calc(100vh-var(--ga-base-scaling-factor,1)*0.25rem*16*2)] max-w-[calc(100vw-var(--ga-base-scaling-factor,1)*0.25rem*8*2)] inline-flex w-full flex-col overflow-y-auto rounded border border-(--ga-color-border-focus) bg-white px-2 py-4;

  scrollbar-width: thin;

  &.ga-modal--small {
    @apply w-85;
  }

  &.ga-modal--medium {
    @apply w-174;
  }

  &.ga-modal--large {
    @apply w-307.5;
  }

  &.ga-modal--danger .ga-modal__icon {
    @apply text-(--ga-color-icon-error);
  }

  &.ga-modal--warning .ga-modal__icon {
    @apply text-(--ga-color-icon-warning);
  }

  &.ga-modal--success .ga-modal__icon {
    @apply text-(--ga-color-icon-success);
  }

  &.ga-modal--information .ga-modal__icon {
    @apply text-(--ga-color-icon-information);
  }

  .ga-modal__top-section {
    @apply flex min-h-8 shrink-0 items-start gap-4 px-2 pb-2;

    &.ga-modal__top-section--scrollable {
      @apply shrink;
    }
  }

  .ga-modal__heading {
    @apply flex min-h-0 flex-1 flex-col self-stretch;
  }

  .ga-modal__icon {
    @apply p-2;
  }

  .ga-modal__label {
    @apply mb-1 flex min-h-6 items-center;
  }

  .ga-modal__title {
    @apply text-xl font-semibold;
  }

  .ga-modal__content {
    @apply mt-4 min-h-0 overflow-y-auto p-2 empty:mt-0;

    scrollbar-width: thin;
  }

  .ga-modal__description {
    @apply mt-4 min-h-0 overflow-y-auto;

    scrollbar-width: thin;
  }

  .ga-modal__actions {
    @apply mt-6 flex flex-wrap items-center justify-end gap-2 px-2;
  }

  .ga-modal__close-icon {
    @apply -mt-2 -mr-2;
  }
}