.ga-notification {
  @apply text-md relative inline-flex flex-row items-start gap-4 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) pt-2 pr-2 pb-2 pl-4;

  &.ga-notification--information {
    @apply border-(--ga-color-border-information) bg-(--ga-color-surface-information);

    .ga-notification__icon {
      @apply text-(--ga-color-icon-information);
    }

    .ga-notification__progress .ga-notification__progress-bar {
      @apply bg-(--ga-color-icon-information);
    }
  }

  &.ga-notification--success {
    @apply border-(--ga-color-border-success) bg-(--ga-color-surface-success);

    .ga-notification__icon {
      @apply text-(--ga-color-icon-success);
    }

    .ga-notification__progress .ga-notification__progress-bar {
      @apply bg-(--ga-color-icon-success);
    }
  }

  &.ga-notification--error {
    @apply border-(--ga-color-border-error) bg-(--ga-color-surface-error);

    .ga-notification__icon {
      @apply text-(--ga-color-icon-error);
    }

    .ga-notification__progress .ga-notification__progress-bar {
      @apply bg-(--ga-color-icon-error);
    }
  }

  &.ga-notification--warning {
    @apply border-(--ga-color-border-warning) bg-(--ga-color-surface-warning);

    .ga-notification__icon {
      @apply text-(--ga-color-icon-warning);
    }

    .ga-notification__progress .ga-notification__progress-bar {
      @apply bg-(--ga-color-icon-warning);
    }
  }

  .ga-notification__icon {
    @apply mt-2 shrink-0 text-(--ga-color-icon-action);
  }

  .ga-notification__description {
    @apply mt-2.5 pr-2 pb-2.5;
  }

  .ga-notification__heading {
    @apply flex min-h-10 flex-row items-center gap-2;

    ~ .ga-notification__description {
      @apply mt-0 pb-0;
    }
  }

  .ga-notification__title {
    @apply flex-1 font-bold;
  }

  .ga-notification__title-actions {
    @apply flex shrink-0 flex-row gap-2;
  }

  .ga-notification__content {
    @apply flex-1;

    &:not(:has(.ga-notification__heading)) {
      @apply min-h-8;
    }

    &:has(.ga-notification__heading) {
      @apply pb-2;
    }
  }

  .ga-notification__progress {
    @apply absolute right-0 bottom-px left-0 h-1 overflow-hidden rounded-b-[2px] bg-(--ga-color-surface-disabled);

    .ga-notification__progress-bar {
      @apply absolute h-full origin-top-left rounded bg-(--ga-color-surface-progress);
    }

    &.ga-notification__progress--indeterminate .ga-notification__progress-bar {
      @apply w-1/5 animate-[ga-notification-progress-animation_1400ms_linear_infinite];
    }
  }
}

@keyframes ga-notification-progress-animation {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(500%);
  }
}