@layer components {
  [data-coco][data-component="app-alert"] {
    @apply rounded-xl overflow-hidden border border-transparent @container;

    .alert-container {
      @apply flex items-start px-4 py-2 relative;
    }

    .alert-icon {
      @apply flex items-center p-2 rounded-full;

      .coco-icon {
        @apply w-5 h-5;
      }
    }

    .alert-body {
      @apply pl-4 pr-2;
    }

    .alert-content {
      @apply text-content-dark-1 w-full;
    }

    .alert-title {
      @apply text-heading-6 font-bold;
    }

    .alert-message {
      @apply text-para-md;

      a {
        @apply text-current;
      }
    }

    .alert-actions {
      @apply space-x-1 flex items-center;
    }

    &.vivid .alert-actions {
      @apply space-x-3;
    }

    .alert-link {
      @apply mt-2;
    }

    /* Banner style */

    &[data-banner="true"] {
      @apply rounded-none;

      .alert-container {
        @apply @[1000px]:justify-center px-app;
      }

      .alert-body {
        @apply @[1000px]:w-auto;
      }
    }

    /* Dismissable */

    &[data-dismissable="true"] {
      .alert-dismiss {
        @apply flex-none;

        .coco-button .button-element {
          @apply text-content-dark-2 hover:text-content-dark-1 bg-transparent hover:bg-white/10 transition;
        }
      }
    }

    /* Condensed */

    &[data-condensed="true"] {
      .alert-container {
        min-height: theme(spacing.12);
        @apply py-1.5;
      }

      .alert-icon {
        @apply p-0 !bg-transparent;
      }

      .alert-body {
        @apply pl-3;
      }

      .alert-title {
        @apply text-para-md sm:text-para-sm xl:text-para-md;
      }

      .alert-message {
        @apply text-para-md sm:text-para-sm xl:text-para-md;
      }
    }

    /* Layout */

    @apply app-alert-stacked @[576px]:app-alert-multi-line;

    &[data-single-line="true"]:not(.force-multi-line) {
      @apply @[1000px]:app-alert-single-line;
    }

    &[data-single-line="true"].force-multi-line {
      @apply @[1000px]:app-alert-multi-line;
    }

    /* Themes */

    &[data-theme] {
      @apply transition-all;
    }

    &[data-theme*="vivid"] {
      @apply border-none antialiased;

      .alert-content {
        @apply text-content-light-1;
      }

      .alert-icon {
        @apply text-content-light-1;
      }

      .coco_link:not([data-theme]) {
        @apply app-link-neutral-light;
      }
    }

    &[data-theme="positive"] {
      @apply bg-background-positive-light border-positive-300 hover:border-positive-400;

      .alert-icon {
        @apply text-content-positive bg-positive-200;
      }
    }

    &[data-theme="positive-vivid"] {
      @apply bg-background-positive;

      .alert-icon {
        @apply bg-positive-700;
      }
    }

    &[data-theme="warning"] {
      @apply bg-background-warning-light border-warning-300  hover:border-warning-400;

      .alert-icon {
        @apply text-content-warning bg-warning-100;
      }
    }

    &[data-theme="warning-vivid"] {
      @apply bg-background-warning;

      .alert-content {
        @apply text-content-dark-1;
      }

      .alert-icon {
        @apply bg-warning-600;
      }

      .coco-link:not([data-theme]) {
        @apply app-link-neutral-dark;
      }
    }

    &[data-theme="negative"] {
      @apply bg-background-negative-light border-negative-300 hover:border-negative-400;

      .alert-icon {
        @apply text-content-negative bg-negative-200;
      }
    }

    &[data-theme="negative-vivid"] {
      @apply bg-background-negative;

      .alert-icon {
        @apply bg-negative-700;
      }
    }

    &[data-theme="info"] {
      @apply bg-background-info-light border-info-300 hover:border-info-400;

      .alert-icon {
        @apply text-content-info bg-info-200;
      }
    }

    &[data-theme="info-vivid"] {
      @apply bg-background-info;

      .alert-icon {
        @apply bg-info-700;
      }
    }
  }
}

@layer utilities {
  .app-alert-stacked {
    .alert-container {
      @apply py-4;
    }

    .alert-actions {
      @apply mt-3;
    }

    &.with-title .alert-message {
      @apply mt-1;
    }

    &[data-condensed="true"] {
      .alert-container {
        @apply py-3;
      }

      .coco-icon {
        @apply mt-1.5;
      }

      &.with-title .alert-message {
        @apply mt-0;
      }
    }

    &[data-dismissable="true"] {
      .alert-container {
        @apply pr-12;
      }

      .alert-dismiss {
        @apply ml-auto absolute top-2 right-2;
      }
    }

    &:not(.with-title) {
      &:not(.with-action) {
        .alert-container {
          @apply items-center;
        }

        .alert-icon {
          @apply self-center;
        }

        &[data-dismissable="true"] {
          .alert-dismiss {
            @apply absolute right-3 top-1/2 -translate-y-1/2;
          }
        }
      }
    }
  }

  .app-alert-multi-line {
    .alert-container {
      @apply items-center py-2.5;
    }

    .alert-icon {
      @apply self-center;
    }

    .alert-body {
      @apply flex items-center w-full;
    }

    .alert-content {
      @apply mr-4;
    }

    .alert-title {
      margin-bottom: 0;
    }

    &.with-title .alert-message {
      @apply mt-1;
    }

    &[data-condensed="true"] {
      .alert-container {
        @apply py-2;
      }

      .coco-icon {
        @apply mt-0;
      }

      &.with-title .alert-message {
        @apply mt-0;
      }
    }

    .alert-actions {
      @apply mt-0 ml-auto;
    }

    &[data-dismissable="true"] {
      .alert-body {
        @apply pr-2;
      }

      .alert-dismiss {
        @apply absolute right-3 top-1/2 -translate-y-1/2;
      }
    }
  }

  .app-alert-single-line {
    .alert-container {
      @apply py-2;
    }

    .alert-content {
      @apply flex items-center w-full space-x-2;
    }

    .alert-title {
      @apply whitespace-nowrap;
    }

    &.with-title .alert-message {
      @apply mt-0;
    }

    .alert-link {
      @apply hidden;
    }

    &[data-dismissable="true"] {
      .alert-body {
        @apply pr-2;
      }

      .alert-container {
        @apply px-12;
      }

      .alert-dismiss {
        @apply absolute right-3 top-1/2 -translate-y-1/2;
      }
    }
  }
}