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

    .alert-container {
      @apply flex items-start p-4 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-para-md font-bold;
    }

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

      a {
        @apply text-current;
      }
    }

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

    .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;
      }

      .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;
        }
      }
    }

    /* Layout */

    @apply app-alert-stacked @[500px]: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;

      .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-title {
      matgin-top: -1px;
      margin-bottom: 2px;
    }

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

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

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

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

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

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

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

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

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

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

      .alert-dismiss {
        @apply relative top-auto right-auto flex flex-col;
      }
    }
  }

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

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

    .alert-link {
      @apply hidden;
    }
  }
}