@use 'mixins/icon';

.off-canvas .alert {
  @apply animate-alert;
}

.alert__icon {
  @apply mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10;
  --icon-size: 66%;

  &::before {
    content: '';

    @include icon.render(('close.svg', 'check.svg', 'error.svg', 'warning.svg', 'info.svg'),
      'fill=white'
    );
  }

  &-success {
    @apply bg-green-400;

    &::before {
      @include icon.pos(1, 2);
    }
  }

  &-error {
    @apply bg-red-400;

    &::before {
      @include icon.pos(2, 1);
    }
  }

  &-warning {
    @apply bg-yellow-300;

    &::before {
      @include icon.pos(3);
    }
  }

  &-info {
    @apply bg-blue-400;

    &::before {
      @include icon.pos(4);
    }
  }

  .alert:has(.sf-dump) & {
    @apply bg-blue-400;

    &::before {
      @include icon.pos(4);
    }
  }
}

.alert__heading {
  @apply text-base font-semibold leading-6 text-gray-900;
}

.alert__body {
  @apply mt-3 text-center sm:mt-0 sm:text-left text-sm text-center text-gray-500 mt-3;

  ul:not(.item-list__comma-list) {
    @apply space-y-2;
  }

  &::backdrop {
    @apply bg-gray-500/75;
  }

  p:has(script):has(style),
  p:empty {
    @apply hidden;
  }

  li:has(pre)+li {
    @apply mt-2;
  }

  a {
    @apply underline underline-offset-2;
  }

  .item-list__comma-list {
    @apply flex gap-1 flex-wrap my-2;
  }
}

.alert__icon+.alert__body {
  @apply sm:ml-4;
}

.alert__close {
  @apply bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
  --icon-size: 100%;

  span {
    @apply pointer-events-none h-6 w-6 block;

    &::before {
      content: '';

      @include icon.render(('close.svg'), 'fill=black');
    }
  }
}
