@acorex/styles 6.1.12 → 7.0.1

package/src/components/_button copy.scss

@@ -0,0 +1,924 @@
+@layer components {
+    .ax-button {
+        @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-normal ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
+        height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+        line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
+
+        & > button {
+            @apply ax-inline-flex ax-items-center ax-justify-center ax-font-normal ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
+            &:focus,
+            &:focus-visible {
+                @apply ax-outline-none;
+                outline: none;
+            }
+            .ax-button-text {
+                @apply ax-px-2;
+            }
+        }
+        &:focus {
+            @apply ax-outline-none;
+        }
+        .ax-prefix,
+        .ax-suffix {
+            @apply ax-flex ax-flex-row;
+        }
+
+        &[class*="-outline"] {
+            @apply ax-border;
+        }
+        .ax-badge {
+            @apply ax-text-xs;
+        }
+
+        &.ax-lg {
+            @apply ax-text-base #{!important};
+        }
+
+        &.ax-button-icon {
+            width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+            & > button {
+                @apply ax-px-3;
+            }
+
+            .ax-prefix,
+            .ax-suffix {
+                @apply ax-p-0;
+            }
+
+            .ax-icon,
+            i {
+                @apply ax-text-2xl;
+            }
+        }
+
+        .ax-loading-spinner {
+            @apply ax-flex ax-pe-1;
+
+            svg {
+                width: calc(var(--ax-base-size) * 3);
+                height: calc(var(--ax-base-size) * 3);
+                @apply ax-fill-current;
+            }
+        }
+
+        // states
+
+        &.ax-state-loading {
+            @apply ax-cursor-not-allowed;
+        }
+
+        &.ax-state-disabled {
+            @apply ax-cursor-not-allowed ax-opacity-60;
+        }
+
+        // primary
+        &.ax-primary-default {
+            @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-primary-800;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-primary-600;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
+                }
+
+                &:active {
+                    @apply ax-bg-primary-800 ax-ring-2 ax-ring-offset-2 ax-ring-primary-800;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-800 dark:ax-bg-primary-500;
+            }
+        }
+        &.ax-primary-twotone {
+            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-800 dark:ax-text-primary-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-primary-200 ax-text-primary-700 dark:ax-bg-primary-700 dark:ax-text-primary-100;
+                }
+
+                &:active {
+                    @apply ax-bg-primary-300 ax-text-primary-700 dark:ax-bg-primary-500;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-500 ax-text-primary-fore;
+            }
+        }
+        &.ax-primary-outline {
+            @apply ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-primary-300 ax-text-primary-300 dark:ax-text-primary-200 dark:ax-border-primary-500;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-primary-400 ax-ring-2 ax-text-primary-400 dark:ax-text-primary-200 dark:ax-border-primary-500 ax-ring-primary-100 dark:ax-ring-primary-900;
+                }
+
+                &:active {
+                    @apply ax-border-primary-600 ax-text-primary-800 dark:ax-border-primary-400 dark:ax-text-primary-100;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-800 ax-text-primary-fore ax-border-primary-800;
+            }
+        }
+        &.ax-primary-blank {
+            @apply ax-text-primary-500 ax-border-transparent dark:ax-text-primary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-primary-600 dark:ax-text-primary-100;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-primary-700 dark:ax-text-primary-200 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
+                }
+
+                &:active {
+                    @apply ax-text-primary-700 ax-ring-0 dark:ax-text-primary-300;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-800 ax-text-primary-fore;
+            }
+        }
+        &.ax-primary-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-primary-700 ax-border-primary-800 dark:ax-border-primary-200 dark:ax-text-primary-200;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-primary-900 dark:ax-text-primary-500 ax-border-primary-800 dark:ax-border-primary-500 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
+                }
+
+                &:active {
+                    @apply ax-text-primary-500 dark:ax-text-primary-400 ax-border-primary-500 dark:ax-border-primary-400;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-800 ax-text-primary-fore;
+            }
+        }
+
+        // secondary
+        &.ax-secondary-default {
+            @apply ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent dark:ax-bg-secondary-800;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-secondary-600;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
+                }
+
+                &:active {
+                    @apply ax-bg-secondary-800 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-800;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
+            }
+        }
+        &.ax-secondary-twotone {
+            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-secondary-200 ax-text-secondary-700 dark:ax-bg-secondary-700 dark:ax-text-secondary-100;
+                }
+
+                &:active {
+                    @apply ax-bg-secondary-300 ax-text-secondary-700 dark:ax-bg-secondary-500;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-secondary-500 ax-text-secondary-fore;
+            }
+        }
+        &.ax-secondary-outline {
+            @apply ax-text-secondary-500 ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-secondary-300 ax-text-secondary-300 dark:ax-text-secondary-200 dark:ax-border-secondary-500;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-secondary-400 ax-ring-2 ax-text-secondary-400 dark:ax-text-secondary-200 dark:ax-border-secondary-500 ax-ring-secondary-100 dark:ax-ring-secondary-900;
+                }
+
+                &:active {
+                    @apply ax-border-secondary-600 ax-text-secondary-800 dark:ax-border-secondary-400 dark:ax-text-secondary-100;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-secondary-800 ax-text-secondary-fore ax-border-secondary-800;
+            }
+        }
+        &.ax-secondary-blank {
+            @apply ax-text-secondary-500 ax-border-transparent dark:ax-text-secondary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-secondary-600 dark:ax-text-secondary-100;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-secondary-700 dark:ax-text-secondary-200 ax-ring-2 ax-ring-secondary-100 dark:ax-ring-secondary-900;
+                }
+
+                &:active {
+                    @apply ax-text-secondary-700 ax-ring-0 dark:ax-text-secondary-300;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-secondary-800 ax-text-secondary-fore;
+            }
+        }
+        &.ax-secondary-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-secondary-700 ax-border-secondary-800 dark:ax-border-secondary-200 dark:ax-text-secondary-200;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-secondary-900 dark:ax-text-secondary-500 ax-border-secondary-800 dark:ax-border-secondary-500 ax-ring-2 ax-ring-secondary-100 dark:ax-ring-secondary-900;
+                }
+
+                &:active {
+                    @apply ax-text-secondary-500 dark:ax-text-secondary-400 ax-border-secondary-500 dark:ax-border-secondary-400;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-secondary-800 ax-text-secondary-fore;
+            }
+        }
+
+        // success
+        &.ax-success-default {
+            @apply ax-bg-success-500 ax-text-success-fore ax-border-transparent dark:ax-bg-success-800;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-success-600;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
+                }
+
+                &:active {
+                    @apply ax-bg-success-800 ax-ring-2 ax-ring-offset-2 ax-ring-success-800;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-success-800 dark:ax-bg-success-500;
+            }
+        }
+        &.ax-success-twotone {
+            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-800 dark:ax-text-success-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-success-200 ax-text-success-700 dark:ax-bg-success-700 dark:ax-text-success-100;
+                }
+
+                &:active {
+                    @apply ax-bg-success-300 ax-text-success-700 dark:ax-bg-success-500;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-success-500 ax-text-success-fore;
+            }
+        }
+        &.ax-success-outline {
+            @apply ax-text-success-500 ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-success-300 ax-text-success-300 dark:ax-text-success-200 dark:ax-border-success-500;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-success-400 ax-ring-2 ax-text-success-400 dark:ax-text-success-200 dark:ax-border-success-500 ax-ring-success-100 dark:ax-ring-success-900;
+                }
+
+                &:active {
+                    @apply ax-border-success-600 ax-text-success-800 dark:ax-border-success-400 dark:ax-text-success-100;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-success-800 ax-text-success-fore ax-border-success-800;
+            }
+        }
+        &.ax-success-blank {
+            @apply ax-text-success-500 ax-border-transparent dark:ax-text-success-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-success-600 dark:ax-text-success-100;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-success-700 dark:ax-text-success-200 ax-ring-2 ax-ring-success-100 dark:ax-ring-success-900;
+                }
+
+                &:active {
+                    @apply ax-text-success-700 ax-ring-0 dark:ax-text-success-300;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-success-800 ax-text-success-fore;
+            }
+        }
+        &.ax-success-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-success-500 ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-success-700 ax-border-success-800 dark:ax-border-success-200 dark:ax-text-success-200;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-success-900 dark:ax-text-success-500 ax-border-success-800 dark:ax-border-success-500 ax-ring-2 ax-ring-success-100 dark:ax-ring-success-900;
+                }
+
+                &:active {
+                    @apply ax-text-success-500 dark:ax-text-success-400 ax-border-success-500 dark:ax-border-success-400;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-success-800 ax-text-success-fore;
+            }
+        }
+
+        // warning
+        &.ax-warning-default {
+            @apply ax-bg-warning-500 ax-text-warning-fore ax-border-transparent dark:ax-bg-warning-800;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-warning-600;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
+                }
+
+                &:active {
+                    @apply ax-bg-warning-800 ax-ring-2 ax-ring-offset-2 ax-ring-warning-800;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-warning-800 dark:ax-bg-warning-500;
+            }
+        }
+        &.ax-warning-twotone {
+            @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-700 dark:ax-text-warning-fore;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-warning-200 ax-text-warning-fore dark:ax-bg-warning-700 dark:ax-text-warning-fore;
+                }
+
+                &:active {
+                    @apply ax-bg-warning-300 ax-text-warning-fore dark:ax-bg-warning-500 dark:ax-text-warning-fore;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-warning-500 ax-text-warning-fore;
+            }
+        }
+        &.ax-warning-outline {
+            @apply ax-text-warning-500 ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-warning-300 ax-text-warning-300 dark:ax-text-warning-200 dark:ax-border-warning-500;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-warning-400 ax-ring-2 ax-text-warning-400 dark:ax-text-warning-200 dark:ax-border-warning-500 ax-ring-warning-100 dark:ax-ring-warning-900;
+                }
+
+                &:active {
+                    @apply ax-border-warning-600 ax-text-warning-800 dark:ax-border-warning-400 dark:ax-text-warning-100;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-warning-800 ax-text-warning-fore ax-border-warning-800;
+            }
+        }
+        &.ax-warning-blank {
+            @apply ax-text-warning-500 ax-border-transparent dark:ax-text-warning-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-warning-600 dark:ax-text-warning-100;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-warning-700 dark:ax-text-warning-200 ax-ring-2 ax-ring-warning-100 dark:ax-ring-warning-900;
+                }
+
+                &:active {
+                    @apply ax-text-warning-700 ax-ring-0 dark:ax-text-warning-300;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-warning-800 ax-text-warning-fore;
+            }
+        }
+        &.ax-warning-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-warning-700 ax-border-warning-800 dark:ax-border-warning-200 dark:ax-text-warning-200;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-warning-900 dark:ax-text-warning-500 ax-border-warning-800 dark:ax-border-warning-500 ax-ring-2 ax-ring-warning-100 dark:ax-ring-warning-900;
+                }
+
+                &:active {
+                    @apply ax-text-warning-500 dark:ax-text-warning-400 ax-border-warning-500 dark:ax-border-warning-400;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-warning-800 ax-text-warning-fore;
+            }
+        }
+
+        // danger
+        &.ax-danger-default {
+            @apply ax-bg-danger-500 ax-text-danger-fore ax-border-transparent dark:ax-bg-danger-800;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-danger-600;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
+                }
+
+                &:active {
+                    @apply ax-bg-danger-800 ax-ring-2 ax-ring-offset-2 ax-ring-danger-800;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-danger-800 dark:ax-bg-danger-500;
+            }
+        }
+        &.ax-danger-twotone {
+            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-800 dark:ax-text-danger-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-danger-200 ax-text-danger-700 dark:ax-bg-danger-700 dark:ax-text-danger-100;
+                }
+
+                &:active {
+                    @apply ax-bg-danger-300 ax-text-danger-700 dark:ax-bg-danger-500;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-danger-500 ax-text-danger-fore;
+            }
+        }
+        &.ax-danger-outline {
+            @apply ax-text-danger-500 ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-danger-300 ax-text-danger-300 dark:ax-text-danger-200 dark:ax-border-danger-500;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-danger-400 ax-ring-2 ax-text-danger-400 dark:ax-text-danger-200 dark:ax-border-danger-500 ax-ring-danger-100 dark:ax-ring-danger-900;
+                }
+
+                &:active {
+                    @apply ax-border-danger-600 ax-text-danger-800 dark:ax-border-danger-400 dark:ax-text-danger-100;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-danger-800 ax-text-danger-fore ax-border-danger-800;
+            }
+        }
+        &.ax-danger-blank {
+            @apply ax-text-danger-500 ax-border-transparent dark:ax-text-danger-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-danger-600 dark:ax-text-danger-100;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-danger-700 dark:ax-text-danger-200 ax-ring-2 ax-ring-danger-100 dark:ax-ring-danger-900;
+                }
+
+                &:active {
+                    @apply ax-text-danger-700 ax-ring-0 dark:ax-text-danger-300;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-danger-800 ax-text-danger-fore;
+            }
+        }
+        &.ax-danger-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-danger-700 ax-border-danger-800 dark:ax-border-danger-200 dark:ax-text-danger-200;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-danger-900 dark:ax-text-danger-500 ax-border-danger-800 dark:ax-border-danger-500 ax-ring-2 ax-ring-danger-100 dark:ax-ring-danger-900;
+                }
+
+                &:active {
+                    @apply ax-text-danger-500 dark:ax-text-danger-400 ax-border-danger-500 dark:ax-border-danger-400;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-danger-800 ax-text-danger-fore;
+            }
+        }
+
+        // info
+        &.ax-primary-default {
+            @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-primary-800;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-primary-600;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
+                }
+
+                &:active {
+                    @apply ax-bg-primary-800 ax-ring-2 ax-ring-offset-2 ax-ring-primary-800;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-800 dark:ax-bg-primary-500;
+            }
+        }
+        &.ax-primary-twotone {
+            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-800 dark:ax-text-primary-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-primary-200 ax-text-primary-700 dark:ax-bg-primary-700 dark:ax-text-primary-100;
+                }
+
+                &:active {
+                    @apply ax-bg-primary-300 ax-text-primary-700 dark:ax-bg-primary-500;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-500 ax-text-primary-fore;
+            }
+        }
+        &.ax-primary-outline {
+            @apply ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-primary-300 ax-text-primary-300 dark:ax-text-primary-200 dark:ax-border-primary-500;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-primary-400 ax-ring-2 ax-text-primary-400 dark:ax-text-primary-200 dark:ax-border-primary-500 ax-ring-primary-100 dark:ax-ring-primary-900;
+                }
+
+                &:active {
+                    @apply ax-border-primary-600 ax-text-primary-800 dark:ax-border-primary-400 dark:ax-text-primary-100;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-800 ax-text-primary-fore ax-border-primary-800;
+            }
+        }
+        &.ax-primary-blank {
+            @apply ax-text-primary-500 ax-border-transparent dark:ax-text-primary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-primary-600 dark:ax-text-primary-100;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-primary-700 dark:ax-text-primary-200 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
+                }
+
+                &:active {
+                    @apply ax-text-primary-700 ax-ring-0 dark:ax-text-primary-300;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-800 ax-text-primary-fore;
+            }
+        }
+        &.ax-primary-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-text-primary-700 ax-border-primary-800 dark:ax-border-primary-200 dark:ax-text-primary-200;
+                }
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-primary-900 dark:ax-text-primary-500 ax-border-primary-800 dark:ax-border-primary-500 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
+                }
+
+                &:active {
+                    @apply ax-text-primary-500 dark:ax-text-primary-400 ax-border-primary-500 dark:ax-border-primary-400;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-primary-800 ax-text-primary-fore;
+            }
+        }
+
+        // dark
+        &.ax-neutral-default {
+            @apply ax-bg-neutral-500 ax-text-neutral-fore ax-border-transparent dark:ax-bg-neutral-600;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-neutral-500 dark:ax-bg-neutral-400;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-neutral-500 dark:ax-ring-neutral-400 dark:ax-bg-neutral-400;
+                }
+
+                &:active {
+                    @apply ax-bg-neutral-700 ax-ring-2 ax-ring-offset-2 ax-ring-neutral-500 dark:ax-ring-neutral-500 dark:ax-bg-neutral-500;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300  ax-text-neutral-fore;
+            }
+        }
+        &.ax-neutral-twotone {
+            @apply ax-bg-neutral-50 ax-text-neutral-500 ax-border-transparent dark:ax-bg-neutral-300 dark:ax-text-neutral-700;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-neutral-100 ax-text-neutral-700;
+                }
+
+                &:active {
+                    @apply ax-bg-neutral-200 ax-text-neutral-700;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300 ax-text-neutral-fore;
+            }
+        }
+        &.ax-neutral-outline {
+            @apply ax-text-neutral-500 ax-border-neutral-500 dark:ax-text-neutral-100 dark:ax-border-neutral-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-neutral-100 ax-text-neutral-100 dark:ax-border-neutral-300 dark:ax-text-neutral-100;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-neutral-200 ax-text-neutral-200 dark:ax-border-neutral-300;
+                }
+
+                &:active {
+                    @apply ax-border-neutral-100;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300 ax-border-neutral-300 ax-text-neutral-fore;
+            }
+        }
+        &.ax-neutral-blank {
+            @apply ax-text-neutral-500 ax-border-transparent dark:ax-text-neutral-50;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-neutral-400 ax-text-neutral-fore dark:ax-bg-transparent dark:ax-text-neutral-100;
+                }
+
+                &:active {
+                    @apply ax-bg-neutral-600 ax-text-neutral-fore dark:ax-text-neutral-50;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300 ax-text-neutral-fore;
+            }
+        }
+        &.ax-neutral-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-neutral-500 ax-border-neutral-500 dark:ax-border-neutral-50 dark:ax-text-neutral-50;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    @apply ax-text-neutral-200 ax-border-neutral-200 dark:ax-border-neutral-200 dark:ax-text-neutral-200;
+                }
+
+                &:active {
+                    @apply ax-text-neutral-300 ax-border-neutral-300 dark:ax-border-neutral-100 dark:ax-text-neutral-100;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300 ax-text-neutral-fore;
+            }
+        }
+
+        // light
+        &.ax-neutral-default {
+            @apply ax-bg-neutral-100 ax-text-neutral-fore dark:ax-bg-neutral-800 dark:ax-border-neutral-800 dark:ax-text-neutral-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-neutral-200 dark:ax-bg-neutral-700;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-neutral-300 dark:ax-ring-neutral-600 dark:ax-bg-neutral-600;
+                }
+
+                &:active {
+                    @apply ax-bg-neutral-300 ax-ring-2 ax-ring-offset-2 ax-ring-neutral-300 dark:ax-bg-neutral-800 dark:ax-ring-neutral-800;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300 dark:ax-bg-neutral-500;
+            }
+        }
+        &.ax-neutral-twotone {
+            @apply ax-bg-neutral-200 ax-text-neutral-fore dark:ax-bg-neutral-600 dark:ax-border-neutral-600 dark:ax-text-neutral-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-neutral-100 dark:ax-bg-neutral-700;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-neutral-300 dark:ax-bg-neutral-700;
+                }
+
+                &:active {
+                    @apply ax-bg-neutral-300 ax-ring-neutral-400 dark:ax-bg-neutral-600;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300 dark:ax-bg-neutral-500;
+            }
+        }
+        &.ax-neutral-outline {
+            @apply ax-text-neutral-fore ax-border ax-border-neutral-300 dark:ax-border-neutral-500 dark:ax-text-neutral-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-neutral-400 ax-text-neutral-500 dark:ax-border-neutral-700 dark:ax-text-neutral-300;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-neutral-600 ax-text-neutral-600 dark:ax-border-neutral-700 dark:ax-text-neutral-400;
+                }
+
+                &:active {
+                    @apply ax-border-neutral-300 ax-text-neutral-400 dark:ax-border-neutral-600 dark:ax-text-neutral-300;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-400 ax-border-neutral-400 dark:ax-bg-neutral-500 dark:ax-border-neutral-500;
+            }
+        }
+        &.ax-neutral-link {
+            @apply ax-text-neutral-fore ax-border-b ax-rounded-none ax-border-neutral-300 dark:ax-text-neutral-100 dark:ax-border-neutral-500;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-border-neutral-500 ax-text-neutral-500 dark:ax-border-neutral-300 dark:ax-text-neutral-300;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-border-neutral-600 ax-text-neutral-600 dark:ax-border-neutral-400 dark:ax-text-neutral-400;
+                }
+
+                &:active {
+                    @apply ax-border-neutral-400 ax-text-neutral-400 dark:ax-border-neutral-300 dark:ax-text-neutral-300;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300 ax-border-neutral-400 dark:ax-bg-neutral-500;
+            }
+        }
+        &.ax-neutral-blank {
+            @apply ax-text-neutral-fore dark:ax-border-neutral-600 dark:ax-text-neutral-100;
+
+            &:not(.ax-state-disabled, .ax-state-selected) {
+                &:hover {
+                    @apply ax-bg-neutral-100 dark:ax-bg-neutral-800;
+                }
+
+                &:focus,
+                &:focus-within {
+                    @apply ax-bg-neutral-200 dark:ax-bg-neutral-700;
+                }
+
+                &:active {
+                    @apply ax-bg-neutral-200 dark:ax-bg-neutral-600;
+                }
+            }
+            &.ax-state-selected {
+                @apply ax-bg-neutral-300 dark:ax-bg-neutral-500;
+            }
+        }
+    }
+
+    .ax-button-group {
+        @apply ax-flex;
+
+        .ax-button {
+            @apply ax-rounded-none;
+
+            &[class*="-link"] {
+                &:first-child,
+                &:last-child {
+                    @apply ax-rounded-s-none ax-rounded-e-none;
+                }
+            }
+
+            &:not(:first-child):not(:last-child) {
+                @apply ax-border-s-0;
+            }
+
+            &:first-child {
+                @apply ax-rounded-s-md;
+            }
+
+            &:last-child {
+                @apply ax-rounded-e-md ax-border-s-0;
+            }
+        }
+    }
+
+    .ax-button-control {
+        @apply ax-cursor-pointer ax-text-sm ax-p-2 ax-rounded-default ax-flex ax-items-center ax-justify-center;
+        ax-icon {
+            @apply ax-text-2xl ax-leading-none;
+        }
+        &:hover {
+            @apply ax-bg-neutral-200 dark:ax-bg-white/[0.12];
+        }
+    }
+}