@acorex/styles 6.1.1 → 6.1.3

package/src/components/_alert.scss

@@ -1,674 +1,276 @@
 @layer components {
-    .ax-alert {
-        @apply ax-relative ax-w-full ax-flex ax-flex-col ax-bg-light-100 ax-text-light-fore ax-rounded ax-overflow-hidden ax-text-sm;
-        transition: visibility 0s, opacity 0.5s ease-in-out;
+  .ax-alert {
+    @apply ax-relative ax-p-4 ax-rounded-default ax-border ax-text-sm ax-flex ax-gap-4 ax-overflow-hidden;
+    transition: visibility 0s, opacity 0.5s ease-in-out;
 
-        &.ax-state-hidden {
-            visibility: hidden;
-            opacity: 0;
-        }
+    &.ax-state-hidden {
+      visibility: hidden;
+      opacity: 0;
+    }
 
-        &.ax-state-visible {
-            visibility: visible;
-            opacity: 1;
-        }
+    &.ax-state-visible {
+      visibility: visible;
+      opacity: 1;
+    }
 
-        .ax-header {
-            @apply ax-flex ax-px-3.5 ax-items-center ax-py-3 ax-bg-transparent ax-border-none ax-justify-start;
-            .ax-icon {
-                @apply ax-text-2xl;
-            }
-        }
+    .ax-alert-inline-middle {
+      @apply ax-flex ax-flex-col ax-justify-center ax-flex-1;
+    }
 
-        .ax-alert-body {
-            @apply ax-flex-1 ax-p-3.5;
-            .ax-icon {
-                @apply ax-text-2xl;
-                &:first-child{
-                    @apply ax-me-2
-                }
-            }
-            .ax-button {
-                --ax-base-size: 6px;
-                @apply ax-ring-offset-0 #{!important};
-            }
-            .ax-content {
-                @apply ax-flex ax-items-center ax-break-words ax-whitespace-pre-wrap;
-
-                ul {
-                    @apply ax-my-2 ax-ms-5 ax-list-disc;
-                }
-
-                a {
-                    @apply ax-text-current ax-font-bold ax-underline;
-
-                    &:hover {
-                        @apply ax-underline;
-                    }
-                }
-            }
-
-            .ax-suffix {
-                @apply ax-block;
-
-                .ax-button {
-                    @apply ax-ms-2 #{!important};
-                }
-            }
-
-            .ax-footer {
-                @apply ax-bg-transparent ax-p-0 ax-mt-3;
-
-                .ax-suffix {
-                    .ax-button {
-                        @apply ax-ms-0 ax-me-2 #{!important};
-                    }
-
-                    @apply ax-mt-3;
-                }
-            }
-        }
+    .ax-alert-inline-start,
+    .ax-alert-inline-end {
+      @apply ax-flex;
+    }
 
-        .ax-alert-progress {
-            @apply ax-absolute ax-start-0 ax-bottom-0 ax-h-1.5 ax-w-0;
-            animation-duration: 4s;
-            animation-timing-function: linear;
-            animation-name: progressBar;
-            @keyframes progressBar {
-                0% {
-                    width: 100%;
-                }
-
-                100% {
-                    width: 0%;
-                }
-            }
-        }
+    .ax-alert-inline-start {
+      @apply ax-items-center;
+      & > ax-icon {
+        @apply ax-w-9 ax-h-9 ax-rounded-full ax-grid ax-place-items-center ax-text-2xl;
+      }
+    }
 
-        // @include button-on-colorful-bg();
-
-        // @include color-look-generator();
-
-        // primary
-        &.ax-primary-outline,
-        &.ax-primary-blank {
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-primary-500;
-                    &:hover {
-                        @apply ax-text-primary-500/50;
-                    }
-                    &:active {
-                        @apply ax-text-primary-500;
-                    }
-                }
-            }
-        }
-        &.ax-primary-default {
-            @apply ax-bg-primary-500 ax-text-primary-fore dark:ax-bg-primary-800 dark:ax-text-primary-100;
-            .ax-header {
-                @apply ax-bg-primary-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-primary-800 dark:ax-bg-primary-500;
-            }
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-primary-fore;
-                    &:hover {
-                        @apply ax-text-primary-50/50;
-                    }
-                    &:active {
-                        @apply ax-text-primary-fore;
-                    }
-                }
-            }
-        }
-        &.ax-primary-twotone {
-            @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-800 dark:ax-text-primary-100;
-            .ax-header {
-                @apply ax-bg-primary-200 dark:ax-bg-primary-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-primary-300 dark:ax-bg-primary-500;
-            }
-        }
-        &.ax-primary-outline {
-            @apply ax-bg-transparent ax-text-primary-500 ax-border ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
-            .ax-header {
-                @apply ax-bg-primary-100 dark:ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-primary-500 ax-h-1 dark:ax-bg-primary-400;
-            }
-        }
-        &.ax-primary-link {
-            @apply ax-bg-transparent ax-rounded-none ax-text-primary-500 ax-border-b ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-primary-500 ax-h-1 dark:ax-bg-primary-400;
-            }
-        }
-        &.ax-primary-blank {
-            @apply ax-bg-transparent ax-text-primary-500 dark:ax-text-primary-300 ax-rounded-none;
-            .ax-header {
-                @apply ax-border-b ax-border-solid ax-border-primary-200 dark:ax-border-primary-800;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-primary-200 dark:ax-bg-primary-800;
-            }
-        }
-        
-
-        // secondary
-        &.ax-secondary-twotone,
-        &.ax-secondary-outline,
-        &.ax-secondary-link,
-        &.ax-secondary-blank {
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-secondary-500;
-                    &:hover {
-                        @apply ax-text-secondary-500/50;
-                    }
-                    &:active {
-                        @apply ax-text-secondary-500;
-                    }
-                }
-            }
-        }
-        &.ax-secondary-default {
-            @apply ax-bg-secondary-500 ax-text-secondary-fore dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
-            .ax-header {
-                @apply ax-bg-secondary-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
-            }
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-secondary-fore;
-                    &:hover {
-                        @apply ax-text-secondary-50/50;
-                    }
-                    &:active {
-                        @apply ax-text-secondary-fore;
-                    }
-                }
-            }
-        }
-        &.ax-secondary-twotone {
-            @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
-            .ax-header {
-                @apply ax-bg-secondary-200 dark:ax-bg-secondary-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-secondary-300 dark:ax-bg-secondary-500;
-            }
-        }
-        &.ax-secondary-outline {
-            @apply ax-bg-transparent ax-text-secondary-500 ax-border ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
-            .ax-header {
-                @apply ax-bg-secondary-100 dark:ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-secondary-500 ax-h-1 dark:ax-bg-secondary-400;
-            }
-        }
-        &.ax-secondary-link {
-            @apply ax-bg-transparent ax-rounded-none ax-text-secondary-500 ax-border-b ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-secondary-500 ax-h-1 dark:ax-bg-secondary-400;
-            }
-        }
-        &.ax-secondary-blank {
-            @apply ax-bg-transparent ax-text-secondary-500 dark:ax-text-secondary-300 ax-rounded-none;
-            .ax-header {
-                @apply ax-border-b ax-border-solid ax-border-secondary-200 dark:ax-border-secondary-800;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-secondary-200 dark:ax-bg-secondary-800;
-            }
-        }
+    .ax-alert-inline-end {
+      @apply ax-items-center;
+    }
 
-        // success
-        &.ax-success-twotone,
-        &.ax-success-outline,
-        &.ax-success-link,
-        &.ax-success-blank {
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-success-500;
-                    &:hover {
-                        @apply ax-text-success-500/50;
-                    }
-                    &:active {
-                        @apply ax-text-success-500;
-                    }
-                }
-            }
-        }
-        &.ax-success-default {
-            @apply ax-bg-success-500 ax-text-success-fore dark:ax-bg-success-800 dark:ax-text-success-100;
-            .ax-header {
-                @apply ax-bg-success-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-success-800 dark:ax-bg-success-500;
-            }
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-success-fore;
-                    &:hover {
-                        @apply ax-text-success-50/50;
-                    }
-                    &:active {
-                        @apply ax-text-success-fore;
-                    }
-                }
-            }
-        }
-        &.ax-success-twotone {
-            @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-800 dark:ax-text-success-100;
-            .ax-header {
-                @apply ax-bg-success-200 dark:ax-bg-success-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-success-300 dark:ax-bg-success-500;
-            }
-        }
-        &.ax-success-outline {
-            @apply ax-bg-transparent ax-text-success-500 ax-border ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
-            .ax-header {
-                @apply ax-bg-success-100 dark:ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-success-500 ax-h-1 dark:ax-bg-success-400;
-            }
-        }
+    .ax-alert-block-start {
+      @apply ax-flex ax-items-center ax-justify-center;
 
-        &.ax-success-link {
-            @apply ax-bg-transparent ax-rounded-none ax-text-success-500 ax-border-b ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-success-500 ax-h-1 dark:ax-bg-success-400;
-            }
-        }
+      .ax-alert-title {
+        @apply ax-flex ax-flex-col ax-flex-1;
+      }
+    }
 
-        &.ax-success-blank {
-            @apply ax-bg-transparent ax-text-success-500 dark:ax-text-success-300 ax-rounded-none;
-            .ax-header {
-                @apply ax-border-b ax-border-solid ax-border-success-200 dark:ax-border-success-800;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-success-200 dark:ax-bg-success-800;
-            }
-        }
+    .ax-alert-block-end {
+      @apply ax-flex ax-flex-col ax-gap-4 ax-pt-2;
+      ax-content {
+        @apply ax-block ax-text-black/[0.87];
+      }
 
-        // warning
-        &.ax-warning-twotone,
-        &.ax-warning-outline,
-        &.ax-warning-link,
-        &.ax-warning-blank {
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-warning-900;
-                    &:hover {
-                        @apply ax-text-warning-900/50;
-                    }
-                    &:active {
-                        @apply ax-text-warning-900;
-                    }
-                }
-            }
-        }
-        &.ax-warning-default {
-            @apply ax-bg-warning-800 ax-text-warning-fore dark:ax-bg-warning-800;
-            .ax-header {
-                @apply ax-bg-warning-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-warning-800 dark:ax-bg-warning-500;
-            }
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-warning-fore;
-                    &:hover {
-                        @apply ax-text-warning-50/50;
-                    }
-                    &:active {
-                        @apply ax-text-warning-fore;
-                    }
-                }
-            }
-        }
-        &.ax-warning-twotone {
-            @apply ax-bg-warning-100 ax-text-warning-900 dark:ax-bg-warning-800 dark:ax-text-warning-fore;
-            .ax-header {
-                @apply ax-bg-warning-200 dark:ax-bg-warning-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-warning-300 dark:ax-bg-warning-500;
-            }
-        }
-        &.ax-warning-outline {
-            @apply ax-bg-transparent ax-text-warning-900 ax-border ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
-            .ax-header {
-                @apply ax-bg-warning-100 dark:ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-warning-500 ax-h-1 dark:ax-bg-warning-400;
-            }
-        }
-        &.ax-warning-link {
-            @apply ax-bg-transparent ax-rounded-none ax-text-warning-900 ax-border-b ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-warning-500 ax-h-1 dark:ax-bg-warning-400;
-            }
-        }
-        &.ax-warning-blank {
-            @apply ax-bg-transparent ax-text-warning-500 dark:ax-text-warning-300 ax-rounded-none;
-            .ax-header {
-                @apply ax-border-b ax-border-solid ax-border-warning-200 dark:ax-border-warning-800;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-warning-200 dark:ax-bg-warning-800;
-            }
-        }
+      ax-footer {
+        @apply ax-bg-transparent;
+      }
+    }
 
-        // danger
-        &.ax-danger-twotone,
-        &.ax-danger-outline,
-        &.ax-danger-link,
-        &.ax-danger-blank {
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-danger-500;
-                    &:hover {
-                        @apply ax-text-danger-500/50;
-                    }
-                    &:active {
-                        @apply ax-text-danger-500;
-                    }
-                }
-            }
-        }
-        &.ax-danger-default {
-            @apply ax-bg-danger-500 ax-text-danger-fore dark:ax-bg-danger-800 dark:ax-text-danger-100;
-            .ax-header {
-                @apply ax-bg-danger-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-danger-800 dark:ax-bg-danger-500;
-            }
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-danger-fore;
-                    &:hover {
-                        @apply ax-text-danger-50/50;
-                    }
-                    &:active {
-                        @apply ax-text-danger-fore;
-                    }
-                }
-            }
-        }
-        &.ax-danger-twotone {
-            @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-800 dark:ax-text-danger-100;
-            .ax-header {
-                @apply ax-bg-danger-200 dark:ax-bg-danger-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-danger-300 dark:ax-bg-danger-500;
-            }
-        }
-        &.ax-danger-outline {
-            @apply ax-bg-transparent ax-text-danger-500 ax-border ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
-            .ax-header {
-                @apply ax-bg-danger-100 dark:ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-danger-500 ax-h-1 dark:ax-bg-danger-400;
-            }
-        }
-        &.ax-danger-link {
-            @apply ax-bg-transparent ax-rounded-none ax-text-danger-500 ax-border-b ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-danger-500 ax-h-1 dark:ax-bg-danger-400;
-            }
-        }
+    .ax-alert-progress {
+      @apply ax-absolute ax-start-0 ax-bottom-0 ax-h-1 ax-w-0;
+      animation-duration: 4s;
+      animation-timing-function: linear;
+      animation-name: progressBar;
 
-        &.ax-danger-blank {
-            @apply ax-bg-transparent ax-text-danger-500 dark:ax-text-danger-300 ax-rounded-none;
-            .ax-header {
-                @apply ax-border-b ax-border-solid ax-border-danger-200 dark:ax-border-danger-800;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-danger-200 dark:ax-bg-danger-800;
-            }
+      @keyframes progressBar {
+        0% {
+          width: 100%;
         }
 
-        // info
-        &.ax-info-twotone,
-        &.ax-info-outline,
-        &.ax-info-link,
-        &.ax-info-blank {
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-info-500;
-                    &:hover {
-                        @apply ax-text-info-500/50;
-                    }
-                    &:active {
-                        @apply ax-text-info-500;
-                    }
-                }
-            }
-        }
-        &.ax-info-default {
-            @apply ax-bg-info-500 ax-text-info-fore dark:ax-bg-info-800 dark:ax-text-info-100;
-            .ax-header {
-                @apply ax-bg-info-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-info-800 dark:ax-bg-info-500;
-            }
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-info-fore;
-                    &:hover {
-                        @apply ax-text-info-50/50;
-                    }
-                    &:active {
-                        @apply ax-text-info-fore;
-                    }
-                }
-            }
-        }
-        &.ax-info-twotone {
-            @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-800 dark:ax-text-info-100;
-            .ax-header {
-                @apply ax-bg-info-200 dark:ax-bg-info-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-info-300 dark:ax-bg-info-500;
-            }
-        }
-        &.ax-info-link {
-            @apply ax-bg-transparent ax-rounded-none ax-text-info-500 ax-border-b ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-info-500 ax-h-1 dark:ax-bg-info-400;
-            }
-        }
-        &.ax-info-outline {
-            @apply ax-bg-transparent ax-text-info-500 ax-border ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
-            .ax-header {
-                @apply ax-bg-info-100 dark:ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-info-500 ax-h-1 dark:ax-bg-info-400;
-            }
-        }
-        &.ax-info-blank {
-            @apply ax-bg-transparent ax-text-info-500 dark:ax-text-info-300 ax-rounded-none;
-            .ax-header {
-                @apply ax-border-b ax-border-solid ax-border-info-200 dark:ax-border-info-800;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-info-200 dark:ax-bg-info-800;
-            }
+        100% {
+          width: 0%;
         }
+      }
+    }
+
+    &.ax-primary-default {
+      @apply ax-bg-primary-50 dark:ax-bg-primary-900 ax-border-primary-500;
+
+      .ax-alert-inline-start {
+        & > ax-icon {
+          @apply ax-bg-primary-500 ax-text-primary-50;
+        }
+      }
+      .ax-alert-block-start {
+        ax-title,
+        ax-sub-title {
+          @apply dark:ax-text-primary-50;
+        }
+      }
+      .ax-alert-block-end {
+        ax-content {
+          @apply dark:ax-text-primary-50;
+        }
+      }
+
+      .ax-alert-progress {
+        @apply ax-bg-primary-800 dark:ax-bg-primary-500;
+      }
+    }
+
+    &.ax-secondary-default {
+      @apply ax-bg-secondary-50 dark:ax-bg-secondary-900 ax-border-secondary-500;
 
-        // light
-        &.ax-light-twotone,
-        &.ax-light-outline,
-        &.ax-light-link,
-        &.ax-light-blank {
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-light-500;
-                    &:hover {
-                        @apply ax-text-light-500/50;
-                    }
-                    &:active {
-                        @apply ax-text-light-500;
-                    }
-                }
-            }
+      .ax-alert-inline-start {
+        & > ax-icon {
+          @apply ax-bg-secondary-500 ax-text-secondary-50;
+        }
+      }
+      .ax-alert-block-start {
+        ax-title,
+        ax-sub-title {
+          @apply dark:ax-text-secondary-50;
+        }
+      }
+      .ax-alert-block-end {
+        ax-content {
+          @apply dark:ax-text-secondary-50;
+        }
+      }
+
+      .ax-alert-progress {
+        @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
+      }
+    }
+
+    &.ax-success-default {
+      @apply ax-bg-success-50 dark:ax-bg-success-900 ax-border-success-500;
+
+      .ax-alert-inline-start {
+        & > ax-icon {
+          @apply ax-bg-success-500 ax-text-success-50;
+        }
+      }
+      .ax-alert-block-start {
+        ax-title,
+        ax-sub-title {
+          @apply dark:ax-text-success-50;
+        }
+      }
+      .ax-alert-block-end {
+        ax-content {
+          @apply dark:ax-text-success-50;
+        }
+      }
+
+      .ax-alert-progress {
+        @apply ax-bg-success-800 dark:ax-bg-success-500;
+      }
+    }
+
+    &.ax-warning-default {
+      @apply ax-bg-warning-50 dark:ax-bg-warning-900 dark:ax-text-black ax-border-warning-500 #{!important};
+
+      .ax-alert-inline-start {
+        & > ax-icon {
+          @apply ax-bg-warning-500 ax-text-warning-50;
+        }
+      }
+      .ax-alert-block-start {
+        ax-title,
+        ax-sub-title {
+          @apply dark:ax-text-black;
+        }
+      }
+      .ax-alert-block-end {
+        ax-content {
+          @apply dark:ax-text-black;
+        }
+      }
+
+      .ax-alert-progress {
+        @apply ax-bg-warning-800 dark:ax-bg-warning-500;
+      }
+    }
+
+    &.ax-danger-default {
+      @apply ax-bg-danger-50 dark:ax-bg-danger-900 ax-border-danger-500;
+
+      .ax-alert-inline-start {
+        & > ax-icon {
+          @apply ax-bg-danger-500 ax-text-danger-50;
         }
-        &.ax-light-default {
-            @apply ax-bg-light-100 dark:ax-bg-light-800 ax-text-light-fore dark:ax-text-light-100 ax-border ax-border-light-200 dark:ax-border-light-900;
-            .ax-header {
-                @apply ax-bg-light-200 dark:ax-bg-light-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-light-300 dark:ax-bg-light-600;
-            }
+      }
+
+      .ax-alert-block-start {
+        ax-title,
+        ax-sub-title {
+          @apply dark:ax-text-danger-50;
         }
-        &.ax-light-twotone {
-            @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-800 dark:ax-text-light-100;
-            .ax-header {
-                @apply ax-bg-light-200 dark:ax-bg-light-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-light-300 dark:ax-bg-light-600;
-            }
+      }
+      .ax-alert-block-end {
+        ax-content {
+          @apply dark:ax-text-danger-50;
         }
-        &.ax-light-outline {
-            @apply ax-bg-transparent ax-text-light-500 ax-border ax-border-light-200 dark:ax-border-light-400 dark:ax-text-light-300;
-            .ax-header {
-                @apply ax-bg-light-100;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-light-300;
-            }
+      }
+
+      .ax-alert-progress {
+        @apply ax-bg-danger-800 dark:ax-bg-danger-500;
+      }
+    }
+
+    &.ax-info-default {
+      @apply ax-bg-info-50 dark:ax-bg-info-900 ax-border-info-500;
+
+      .ax-alert-inline-start {
+        & > ax-icon {
+          @apply ax-bg-info-500 ax-text-info-50;
         }
-        &.ax-light-link {
-            @apply ax-bg-transparent ax-rounded-none ax-text-light-500 ax-border-b ax-border-light-500 dark:ax-border-light-400 dark:ax-text-light-300;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-light-300;
-            }
+      }
+
+      .ax-alert-block-start {
+        ax-title,
+        ax-sub-title {
+          @apply dark:ax-text-info-50;
         }
-        &.ax-light-blank {
-            @apply ax-bg-transparent ax-text-light-500 dark:ax-text-light-300;
-            .ax-header {
-                @apply ax-border-b ax-border-solid ax-border-light-200 dark:ax-border-light-500;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-light-200 dark:ax-bg-light-500;
-            }
+      }
+      .ax-alert-block-end {
+        ax-content {
+          @apply dark:ax-text-info-50;
         }
-        // dark
-        &.ax-dark-twotone,
-        &.ax-dark-outline,
-        &.ax-dark-link,
-        &.ax-dark-blank {
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-dark-500;
-                    &:hover {
-                        @apply ax-text-dark-500/50;
-                    }
-                    &:active {
-                        @apply ax-text-dark-500;
-                    }
-                }
-            }
+      }
+
+      .ax-alert-progress {
+        @apply ax-bg-info-800 dark:ax-bg-info-500;
+      }
+    }
+
+    &.ax-light-default {
+      @apply ax-bg-light-50 dark:ax-bg-light-900 ax-border-light-500;
+
+      .ax-alert-inline-start {
+        & > ax-icon {
+          @apply ax-bg-light-500 ax-text-light-50;
         }
-        &.ax-dark-default {
-            @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-800 dark:ax-text-dark-100;
-            .ax-header {
-                @apply ax-bg-dark-600;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-dark-50/30;
-            }
-            .ax-close-button {
-                .ax-icon {
-                    @apply ax-text-dark-fore;
-                    &:hover {
-                        @apply ax-text-dark-50/50;
-                    }
-                    &:active {
-                        @apply ax-text-dark-fore;
-                    }
-                }
-            }
+      }
+
+      .ax-alert-block-start {
+        ax-title,
+        ax-sub-title {
+          @apply dark:ax-text-light-50;
         }
-        &.ax-dark-twotone {
-            @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-800 dark:ax-text-dark-100;
-            .ax-header {
-                @apply ax-bg-dark-200;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-dark-100;
-            }
+      }
+      .ax-alert-block-end {
+        ax-content {
+          @apply dark:ax-text-light-50;
         }
-        &.ax-dark-outline {
-            @apply ax-bg-transparent ax-text-dark-500 ax-border ax-border-dark-100 dark:ax-border-dark-400 dark:ax-text-dark-300;
-            .ax-header {
-                @apply ax-bg-dark-50;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-dark-100;
-            }
+      }
+
+      .ax-alert-progress {
+        @apply ax-bg-light-300 dark:ax-bg-light-600;
+      }
+    }
+
+    &.ax-dark-default {
+      @apply ax-bg-dark-50 dark:ax-bg-dark-900 ax-border-dark-500;
+
+      .ax-alert-inline-start {
+        & > ax-icon {
+          @apply ax-bg-dark-500 ax-text-dark-50;
         }
-        &.ax-dark-link {
-            @apply ax-bg-transparent ax-rounded-none ax-text-dark-500 ax-border-b ax-border-dark-500 dark:ax-border-dark-400 dark:ax-text-dark-300;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-dark-100;
-            }
+      }
+
+      .ax-alert-block-start {
+        ax-title,
+        ax-sub-title {
+          @apply dark:ax-text-dark-50;
         }
-        &.ax-dark-blank {
-            @apply ax-bg-transparent ax-text-dark-500 dark:ax-text-dark-100;
-            .ax-header {
-                @apply ax-bg-transparent;
-            }
-            .ax-alert-progress {
-                @apply ax-bg-dark-200 dark:ax-bg-dark-200;
-            }
+      }
+      .ax-alert-block-end {
+        ax-content {
+          @apply dark:ax-text-dark-50;
         }
+      }
+    }
+
+    .ax-alert-progress {
+      @apply ax-bg-dark-200 dark:ax-bg-dark-200;
     }
+  }
 }