@acorex/styles 7.0.5 → 7.0.7

package/src/components/_button copy.scss

@@ -1,924 +0,0 @@
-@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];
-        }
-    }
-}