@acorex/styles 5.1.2 → 5.1.6

package/src/components/_button.scss

@@ -1,762 +0,0 @@
-@layer components {
-    ax-button {
-        height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-        line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
-        @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-base ax-font-medium ax-border-light-300 ax-text-light-600 ax-select-none ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
-        @screen md {
-            @apply ax-text-sm;
-        }
-        ax-prefix {
-            @apply ax-flex ax-flex-row ax-pe-2;
-        }
-        ax-suffix {
-            @apply ax-flex ax-flex-row ax-ps-2;
-        }
-        .ax-badge {
-            @apply ax-text-xs;
-        }
-        &:focus {
-            @apply ax-outline-none ax-z-10;
-        }
-        &.ax-rounded {
-            @apply ax-rounded-full;
-        }
-        &.ax-button-icon {
-            width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-            @apply ax-px-3;
-
-            ax-prefix,
-            ax-suffix {
-                @apply ax-p-0;
-            }
-            ax-icon {
-                @apply ax-text-base;
-            }
-        }
-        // &.ax-sm {
-        //     height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
-        //     line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - var(--ax-base-size)) !important;
-        //     @apply ax-text-sm;
-        //     .ax-ic {
-        //         @apply ax-text-sm;
-        //     }
-        // }
-        // &.ax-lg {
-        //     height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
-        //     line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + var(--ax-base-size)) !important;
-        //     @apply ax-text-lg;
-        //     &.ax-button-icon {
-        //         @apply ax-px-3;
-        //     }
-        //     .ax-ic {
-        //         @apply ax-text-3xl;
-        //     }
-        // }
-        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-selected {
-            @apply ax-z-10;
-        }
-        &.ax-state-loading {
-            @apply ax-cursor-not-allowed;
-        }
-        &.ax-state-disabled {
-            @apply ax-cursor-not-allowed ax-opacity-60;
-        }
-        // normal
-        &.ax-primary-default {
-            @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-primary-600;
-                }
-                &:focus {
-                    @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-700;
-            }
-        }
-        &.ax-secondary-default {
-            @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-secondary-600;
-                }
-                &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
-                }
-                &:active {
-                    @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-secondary-700;
-            }
-        }
-        &.ax-warning-default {
-            @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-warning-400;
-                }
-                &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
-                }
-                &:active {
-                    @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-warning-700 ax-text-warning-50;
-            }
-        }
-        &.ax-danger-default {
-            @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-danger-600;
-                }
-                &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
-                }
-                &:active {
-                    @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-danger-700;
-            }
-        }
-        &.ax-success-default {
-            @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-success-600;
-                }
-                &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
-                }
-                &:active {
-                    @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-success-700;
-            }
-        }
-        &.ax-info-default {
-            @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-info-600;
-                }
-                &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
-                }
-                &:active {
-                    @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-info-700;
-            }
-        }
-        &.ax-dark-default {
-            @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-400;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-dark-400 dark:ax-bg-dark-400;
-                }
-                &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
-                }
-                &:active {
-                    @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-dark-300;
-            }
-        }
-        &.ax-light-default {
-            @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-light-300 dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-light-100 dark:ax-bg-light-600;
-                }
-                &:focus {
-                    @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200 dark:ax-bg-light-500 dark:ax-ring-light-500;
-                }
-                &:active {
-                    @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200 dark:ax-bg-light-500 dark:ax-ring-light-500;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-light-600 ax-text-light-50;
-            }
-        }
-        // twotone
-        &.ax-primary-twotone {
-            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-primary-200 ax-text-primary-700;
-                }
-                &:active {
-                    @apply ax-bg-primary-300 ax-text-primary-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-primary-200 ax-text-primary-700;
-            }
-        }
-        &.ax-secondary-twotone {
-            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-secondary-200 ax-text-secondary-700;
-                }
-                &:active {
-                    @apply ax-bg-secondary-300 ax-text-secondary-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-secondary-200 ax-text-secondary-700;
-            }
-        }
-        &.ax-warning-twotone {
-            @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-warning-200 ax-text-warning-700;
-                }
-                &:active {
-                    @apply ax-bg-warning-300 ax-text-warning-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-warning-200 ax-text-warning-700;
-            }
-        }
-        &.ax-danger-twotone {
-            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-danger-200 ax-text-danger-700;
-                }
-                &:active {
-                    @apply ax-bg-danger-300 ax-text-danger-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-danger-200 ax-text-danger-700;
-            }
-        }
-        &.ax-success-twotone {
-            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-success-200 ax-text-success-700;
-                }
-                &:active {
-                    @apply ax-bg-success-300 ax-text-success-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-success-200 ax-text-success-700;
-            }
-        }
-        &.ax-info-twotone {
-            @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-info-200 ax-text-info-700;
-                }
-                &:active {
-                    @apply ax-bg-info-300 ax-text-info-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-info-200 ax-text-primary-700;
-            }
-        }
-        &.ax-dark-twotone {
-            @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                }
-                &:focus {
-                    @apply ax-bg-dark-100 ax-text-dark-700;
-                }
-                &:active {
-                    @apply ax-bg-dark-200 ax-text-dark-700;
-                }
-                &.ax-state-selected {
-                    @apply ax-bg-dark-200 ax-text-dark-fore;
-                }
-            }
-        }
-        &.ax-light-twotone {
-            @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent  dark:ax-bg-light-300 dark:ax-text-light-700;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-light-300;
-                }
-                &:focus {
-                    @apply ax-bg-light-200;
-                }
-                &:active {
-                    @apply ax-bg-light-300;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-light-400;
-            }
-        }
-        // outline
-        &.ax-primary-outline {
-            @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-primary-500 ax-border-primary-500 ax-text-primary-fore;
-                }
-                &:active {
-                    @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-primary-500 ax-text-primary-fore;
-            }
-        }
-        &.ax-secondary-outline {
-            @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-secondary-500 ax-border-secondary-500 ax-text-secondary-fore;
-                }
-                &:active {
-                    @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-secondary-500 ax-text-secondary-fore;
-            }
-        }
-        &.ax-warning-outline {
-            @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-warning-500 ax-border-warning-500 ax-text-warning-fore;
-                }
-                &:active {
-                    @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-warning-500 ax-text-warning-fore;
-            }
-        }
-        &.ax-danger-outline {
-            @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-danger-500 ax-border-danger-500 ax-text-danger-fore;
-                }
-                &:active {
-                    @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-danger-500 ax-text-danger-fore;
-            }
-        }
-        &.ax-success-outline {
-            @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-success-500 ax-border-success-500 ax-text-success-fore;
-                }
-                &:active {
-                    @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-success-500 ax-text-success-fore;
-            }
-        }
-        &.ax-info-outline {
-            @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-info-500 ax-border-info-500 ax-text-info-fore;
-                }
-                &:active {
-                    @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-info-500 ax-text-info-fore;
-            }
-        }
-        &.ax-dark-outline {
-            @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500 hover:ax-bg-danger-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-bg-dark-50 ax-border-dark-500 ax-text-dark-500 dark:ax-border-dark-300 dark:ax-bg-dark-300 dark:ax-text-light-100;
-                }
-                &:focus {
-                    @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore dark:ax-border-dark-300 dark:ax-bg-dark-300 dark:ax-text-light-100;
-                }
-                &:active {
-                    @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore dark:ax-bg-dark-200 ;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-dark-500 ax-text-dark-fore;
-            }
-        }
-        &.ax-light-outline {
-            @apply ax-bg-transparent ax-text-light-fore ax-border-light-300 dark:ax-text-light-200 dark:ax-border-light-400;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-light-200 ax-border-light-300 ax-text-light-fore;
-                }
-                &:active {
-                    @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-light-300 ax-text-light-fore;
-            }
-        }
-        // blank
-        &.ax-primary-blank {
-            @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-transparent;
-                }
-                &:active {
-                    @apply ax-bg-primary-100 ax-text-primary-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-primary-200;
-            }
-        }
-        &.ax-secondary-blank {
-            @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-transparent;
-                }
-                &:active {
-                    @apply ax-bg-secondary-100 ax-text-secondary-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-secondary-200;
-            }
-        }
-        &.ax-warning-blank {
-            @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-transparent;
-                }
-                &:active {
-                    @apply ax-bg-warning-100 ax-text-warning-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-warning-200;
-            }
-        }
-        &.ax-danger-blank {
-            @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-transparent;
-                }
-                &:active {
-                    @apply ax-bg-danger-100 ax-text-danger-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-danger-200;
-            }
-        }
-        &.ax-success-blank {
-            @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-transparent;
-                }
-                &:active {
-                    @apply ax-bg-success-100 ax-text-success-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-success-200;
-            }
-        }
-        &.ax-info-blank {
-            @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-transparent;
-                }
-                &:active {
-                    @apply ax-bg-info-100 ax-text-info-700;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-info-200;
-            }
-        }
-        &.ax-dark-blank {
-            @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-dark-400 ax-text-dark-fore dark:ax-bg-transparent dark:ax-text-dark-100;
-                }
-                &:active {
-                    @apply ax-bg-dark-600 ax-text-dark-fore dark:ax-text-dark-50;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-dark-200;
-            }
-        }
-        &.ax-light-blank {
-            @apply ax-bg-transparent ax-text-light-600 ax-border-transparent dark:ax-text-light-300;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-bg-light-50 ax-text-light-500 dark:ax-bg-transparent dark:ax-text-light-500;
-                }
-                &:active {
-                    @apply ax-bg-light-200 ax-text-light-700 dark:ax-text-light-300;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-light-600;
-            }
-        }
-        // link
-        &.ax-primary-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-text-primary-600 ax-border-primary-600;
-                }
-                &:active {
-                    @apply ax-text-primary-500 ax-border-primary-500;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-primary-200;
-            }
-        }
-        &.ax-secondary-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-text-secondary-600 ax-border-secondary-600;
-                }
-                &:active {
-                    @apply ax-text-secondary-500 ax-border-secondary-500;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-secondary-200;
-            }
-        }
-        &.ax-warning-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-text-warning-600 ax-border-warning-600;
-                }
-                &:active {
-                    @apply ax-text-warning-500 ax-border-warning-500;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-warning-200;
-            }
-        }
-        &.ax-danger-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-text-danger-600 ax-border-danger-600;
-                }
-                &:active {
-                    @apply ax-text-danger-500 ax-border-danger-500;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-danger-200;
-            }
-        }
-        &.ax-success-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-text-success-600 ax-border-success-600;
-                }
-                &:active {
-                    @apply ax-text-success-500 ax-border-success-500;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-success-200;
-            }
-        }
-        &.ax-info-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info-500;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-text-info-600 ax-border-info-600;
-                }
-                &:active {
-                    @apply ax-text-info-500 ax-border-info-500;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-info-200;
-            }
-        }
-        &.ax-dark-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
-            &:not(.ax-state-disabled) {
-                &:hover,
-                &:focus {
-                    @apply ax-text-dark-600 ax-border-dark-600 dark:ax-border-dark-200 dark:ax-text-dark-200;
-                }
-                &:active {
-                    @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-dark-200;
-            }
-        }
-        &.ax-light-link {
-            @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-light-400 ax-border-light-400 dark:ax-border-light-50 dark:ax-text-light-50;
-            &:not(.ax-state-disabled) {
-                &:hover {
-                    @apply ax-text-light-300 ax-border-light-300;
-                }
-                &:focus {
-                    @apply ax-text-light-500 ax-border-y-light-500;
-                }
-                &:active {
-                    @apply ax-text-light-600 ax-border-light-600 dark:ax-border-light-200 dark:ax-text-light-200;
-                }
-            }
-
-            &.ax-state-selected {
-                @apply ax-bg-light-600;
-            }
-        }
-    }
-    .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;
-            }
-        }
-    }
-}