@acorex/styles 7.17.11 → 7.17.13

package/src/shared/_drop-down.scss

@@ -1,38 +1,74 @@
 @import '../variables/index.scss';
 
 .ax-drop-down {
-  @apply ax-contents;
+  // @apply ax-contents;
+  display: contents;
 
   .ax-dropdown-content {
-    @apply ax-flex ax-flex-1 ax-items-center ax-overflow-x-auto ax-overflow-y-hidden ax-text-sm ax-capitalize;
+    // @apply ax-flex ax-flex-1 ax-items-center ax-overflow-x-auto ax-overflow-y-hidden ax-text-sm ax-capitalize;
+    display: flex;
+    flex: 1 1 0%;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+    font-size: 0.875rem /* 14px */;
+    line-height: 1.25rem /* 20px */;
+    text-transform: capitalize;
 
     &.ax-state-disabled {
-      @apply ax-cursor-not-allowed ax-opacity-50;
+      // @apply ax-cursor-not-allowed ax-opacity-50;
+      cursor: not-allowed;
+      opacity: 0.5;
     }
   }
 }
 
 .ax-overlay-pane {
-  @apply ax-mt-1 ax-h-fit ax-overflow-hidden ax-rounded-none ax-border ax-border-default ax-bg-surface ax-shadow-md md:ax-rounded-default;
+  // @apply ax-mt-1 ax-h-fit ax-overflow-hidden ax-rounded-none ax-border ax-border-default ax-bg-surface ax-shadow-md md:ax-rounded-default;
+  margin-top: 0.25rem /* 4px */;
+  height: fit-content;
+  overflow: hidden;
+  border-radius: 0px;
+  border-width: 1px;
+  border-color: rgba(var(--ax-color-border-default));
+  background-color: rgba(var(--ax-color-surface));
+  --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
+  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
+  @media (min-width: 768px) {
+    border-radius: var(--ax-rounded-border-default);
+  }
   ax-header,
   ax-footer {
-    @apply ax-bg-surface ax-p-3;
+    // @apply ax-bg-surface ax-p-3;
+    background-color: rgba(var(--ax-color-surface));
+    padding: 0.75rem /* 12px */;
   }
 
   &.ax-overlay-center {
-    @apply ax-h-fit ax-w-[80vw] ax-max-w-[90vh];
+    // @apply ax-h-fit ax-w-[80vw] ax-max-w-[90vh];
+    height: fit-content;
+    width: 80vw;
+    max-width: 90vh;
   }
 
   &.ax-overlay-actionsheet {
-    @apply ax-h-auto ax-max-h-[85vh] ax-w-full ax-bg-surface;
+    // @apply ax-h-auto ax-max-h-[85vh] ax-w-full ax-bg-surface;
+    height: auto;
+    max-height: 85vh;
+    width: 100%;
+    background-color: rgba(var(--ax-color-surface));
+
     &.ax-full {
-      @apply ax-h-[95vh] ax-max-h-[95vh];
+      // @apply ax-h-[95vh] ax-max-h-[95vh];
+      height: 95vh;
+      max-height: 95vh;
     }
   }
 
   &.ax-overlay-full {
     width: 100vw;
     height: 100vh;
-    @apply ax-h-screen ax-w-screen;
+    // @apply ax-h-screen ax-w-screen;
   }
 }

package/src/shared/_editor-container.scss

@@ -1,10 +1,11 @@
-@import '../mixins/index.scss';
+@import '../mixins/look';
 
 @include darkMode() {
   .ax-editor-container {
     &.ax-look-fill {
       &.ax-state-error {
-        @apply ax-bg-danger-500/25;
+        // @apply ax-bg-danger-500/25;
+        background-color: rgba(var(--ax-color-danger-500), 0.25);
       }
 
       &.ax-state-success {
@@ -14,7 +15,15 @@
   }
 }
 .ax-editor-container {
-  @apply ax-flex ax-h-default ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none ax-text-input-surface-fore;
+  // @apply ax-flex ax-h-default ax-w-full ax-items-center ax-overflow-hidden ax-text-sm ax-leading-none ax-text-input-surface-fore;
+  display: flex;
+  height: var(--ax-size-default);
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1;
+  color: rgba(var(--ax-color-input-surface-fore));
 
   &.ax-look-solid,
   &.ax-look-outline {
@@ -31,51 +40,83 @@
   }
 
   .ax-editor-input {
-    @apply ax-h-full ax-flex-1;
+    // @apply ax-h-full ax-flex-1;
+    height: 100%;
+    flex: 1 1 0%;
+
     .ax-input {
-      @apply ax-h-full;
+      // @apply ax-h-full;
+      height: 100%;
     }
   }
   .ax-input {
-    @apply ax-px-3;
+    // @apply ax-px-3;
+    padding-left: 0.75rem /* 12px */;
+    padding-right: 0.75rem /* 12px */;
     &::placeholder {
+      // @apply ax-font-normal ax-text-default/50;
       font-size: inherit;
-      @apply ax-font-normal ax-text-default/50;
+      font-weight: 400;
+      color: rgb(var(--ax-color-text-default), 0.5);
     }
   }
 
   &.ax-xs {
     .ax-input {
-      @apply ax-p-2 ax-text-xs;
+      // @apply ax-p-2 ax-text-xs;
+      padding: 0.5rem /* 8px */;
+      font-size: 0.75rem /* 12px */;
+      line-height: 1rem /* 16px */;
     }
   }
   &.ax-sm {
     .ax-input {
-      @apply ax-p-2 ax-text-sm;
+      // @apply ax-p-2 ax-text-sm;
+      padding: 0.5rem /* 8px */;
+      font-size: 0.875rem /* 14px */;
+      line-height: 1.25rem /* 20px */;
     }
   }
   &.ax-md {
     .ax-input {
-      @apply ax-text-sm;
+      // @apply ax-text-sm;
+      font-size: 0.875rem /* 14px */;
+      line-height: 1.25rem /* 20px */;
     }
   }
   &.ax-lg {
     .ax-input {
-      @apply ax-text-lg;
+      // @apply ax-text-lg;
+      font-size: 1rem /* 18px */;
+      line-height: 1.25rem /* 28px */;
     }
   }
   &.ax-xl {
     .ax-input {
-      @apply ax-text-lg;
+      // @apply ax-text-lg;
+      font-size: 1.125rem /* 18px */;
+      line-height: 1.75rem /* 28px */;
     }
   }
 
   .ax-editor-control {
-    @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-ps-2 ax-text-lg ax-text-input-surface-fore;
+    // @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-ps-2 ax-text-lg ax-text-input-surface-fore;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding-inline-start: 0.5rem /* 8px */;
+    font-size: 1.125rem /* 18px */;
+    line-height: 1.75rem /* 28px */;
+    font-size: 1.125rem /* 18px */;
+    line-height: 1.75rem /* 28px */;
+    color: rgba(var(--ax-color-input-surface-fore));
   }
 
   &.ax-button-icon {
-    @apply ax-px-2;
+    // @apply ax-px-2;
+    padding-left: 0.5rem /* 8px */;
+    padding-right: 0.5rem /* 8px */;
   }
   .ax-input,
   .ax-text-area {
@@ -83,25 +124,37 @@
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
-    @apply ax-h-full ax-w-full ax-flex-1 ax-bg-transparent ax-font-normal;
+    height: 100%;
+    width: 100%;
+    flex: 1 1 0%;
+    background-color: transparent;
+    font-weight: 400;
+
+    // @apply ax-h-full ax-w-full ax-flex-1 ax-bg-transparent ax-font-normal;
 
     &:focus {
-      @apply ax-shadow-none;
+      // @apply ax-shadow-none;
+      box-shadow: none;
     }
   }
 
   .ax-text-area {
-    @apply ax-p-2.5;
+    // @apply ax-p-2.5;
+    padding: 0.625rem /* 10px */;
   }
   & > ax-prefix {
     *,
     .ax-button,
     ax-title {
-      @apply ax-rounded-es ax-rounded-ss;
+      // @apply ax-rounded-es ax-rounded-ss;
+      border-end-start-radius: 0.25rem /* 4px */;
+      border-start-start-radius: 0.25rem /* 4px */;
     }
 
     ax-icon {
-      @apply ax-px-3;
+      // @apply ax-px-3;
+      padding-left: 0.75rem /* 12px */;
+      padding-right: 0.75rem /* 12px */;
     }
   }
 
@@ -109,48 +162,79 @@
     *,
     .ax-button,
     ax-title {
-      @apply ax-rounded-ee ax-rounded-se;
+      // @apply ax-rounded-ee ax-rounded-se;
+      border-end-end-radius: 0.25rem /* 4px */;
+      border-start-end-radius: 0.25rem /* 4px */;
     }
     ax-icon {
-      @apply ax-pe-3;
+      // @apply ax-pe-3;
+      padding-inline-end: 0.75rem /* 12px */;
     }
   }
 
   & > ax-prefix,
   & > ax-suffix {
-    @apply ax-h-full;
+    // @apply ax-h-full;
+    height: 100%;
+
     + .ax-input {
-      @apply ax-px-0.5 #{!important};
+      // @apply ax-px-0.5 #{!important};
+      padding-left: 0.125rem !important;
+      padding-right: 0.125rem !important;
     }
     * {
-      @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-rounded-none;
+      // @apply ax-flex ax-h-full ax-items-center ax-justify-center ax-rounded-none;
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0px;
     }
 
     ax-title {
-      @apply ax-px-4;
+      // @apply ax-px-4;
+      padding-left: 1rem /* 16px */;
+      padding-right: 1rem /* 16px */;
     }
 
     & > ax-text {
-      @apply ax-flex ax-items-center ax-justify-center ax-bg-transparent ax-px-2 ax-text-sm;
+      // @apply ax-flex ax-items-center ax-justify-center ax-bg-transparent ax-px-2 ax-text-sm;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: transparent;
+      padding-left: 0.5rem /* 8px */;
+      padding-right: 0.5rem /* 8px */;
+      font-size: 0.875rem /* 14px */;
+      line-height: 1.25rem /* 20px */;
     }
   }
 
   .ax-button {
-    @apply ax-h-full ax-rounded-none #{!important};
+    // @apply ax-h-full ax-rounded-none #{!important};
+    height: 100% !important;
+    border-radius: 0px !important;
 
     &.ax-button-icon {
-      @apply ax-h-full ax-w-default;
+      // @apply ax-h-full ax-w-default;
+      height: 100%;
+      width: var(--ax-size-default);
     }
   }
 
   &.ax-state-disabled {
-    @apply ax-cursor-not-allowed ax-opacity-50;
+    // @apply ax-cursor-not-allowed ax-opacity-50;
+    cursor: not-allowed;
+    opacity: 0.5;
   }
 }
 .ax-ripple {
+  // @apply ax-absolute ax-rounded-full;
   transform: scale(0);
   animation: ripple 500ms linear;
-  @apply ax-absolute ax-rounded-full;
+  position: absolute;
+  border-radius: 9999px;
+
   @keyframes ripple {
     to {
       transform: scale(4);

package/src/shared/_general-button.scss

@@ -1,56 +1,94 @@
 .ax-general-button {
-  @apply ax-inline-flex ax-h-default ax-cursor-pointer ax-items-center ax-justify-center ax-rounded-default ax-px-4 ax-text-sm ax-text-default/75;
+  // @apply ax-inline-flex ax-h-default ax-cursor-pointer ax-items-center ax-justify-center ax-rounded-default ax-px-4 ax-text-sm ax-text-default/75;
+  display: inline-flex;
+  height: var(--ax-size-default);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ax-rounded-border-default);
+  padding-left: 1rem /* 16px */;
+  padding-right: 1rem /* 16px */;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  color: rgb(var(--ax-color-text-default), 0.75);
+
   &:hover {
     &:not(&:disabled, .ax-state-disabled) {
-      @apply ax-text-primary-500;
+      // @apply ax-text-primary-500;
+      color: rgba(var(--ax-color-primary-500), var(--tw-text-opacity));
     }
   }
 
   &:focus,
   &:focus-visible {
     &:not(&:disabled, .ax-state-disabled) {
-      @apply ax-text-primary-700;
+      // @apply ax-text-primary-700;
+      color: rgba(var(--ax-color-primary-700), var(--tw-text-opacity));
     }
   }
 
   &:active {
     &:not(&:disabled, .ax-state-disabled) {
-      @apply ax-text-primary-300;
+      // @apply ax-text-primary-300;
+      color: rgba(var(--ax-color-primary-300), var(--tw-text-opacity));
     }
   }
 
   &.ax-button-icon {
-    @apply ax-px-2 ax-text-lg;
+    // @apply ax-px-2 ax-text-lg;
+    padding-left: 0.5rem /* 8px */;
+    padding-right: 0.5rem /* 8px */;
+    font-size: 1.125rem /* 18px */;
+    line-height: 1.75rem /* 28px */;
     > button {
-      @apply ax-flex;
+      // @apply ax-flex;
+      display: flex;
     }
     ax-icon {
-      @apply ax-text-lg;
+      // @apply ax-text-lg;
+      font-size: 1.125rem /* 18px */;
+      line-height: 1.75rem /* 28px */;
     }
   }
   &.ax-button-rounded {
-    @apply ax-rounded-default;
+    // @apply ax-rounded-default;
+    border-radius: var(--ax-rounded-border-default);
   }
   &:disabled,
   &.ax-state-disabled {
-    @apply ax-cursor-not-allowed ax-opacity-50;
+    // @apply ax-cursor-not-allowed ax-opacity-50;
+    cursor: not-allowed;
+    opacity: 0.5;
   }
 }
 .ax-clear-button {
-  @apply ax-inline-flex ax-h-default ax-items-center ax-justify-center ax-px-3 ax-text-base ax-leading-none ax-text-default/75;
+  // @apply ax-inline-flex ax-h-default ax-items-center ax-justify-center ax-px-3 ax-text-base ax-leading-none ax-text-default/75;
+  display: inline-flex;
+  height: var(--ax-size-default);
+  align-items: center;
+  justify-content: center;
+  padding-left: 0.75rem /* 12px */;
+  padding-right: 0.75rem /* 12px */;
+  font-size: 1rem /* 16px */;
+  line-height: 1.5rem /* 24px */;
+  line-height: 1;
+  color: rgb(var(--ax-color-text-default), 0.75);
 
   > button {
-    @apply ax-flex;
+    // @apply ax-flex;
+    display: flex;
   }
   &:hover {
     &:not(&:disabled, .ax-state-disabled) {
-      @apply ax-text-default/50;
+      // @apply ax-text-default/50;
+      color: rgb(var(--ax-color-text-default), 0.5);
     }
   }
   &:focus,
   &:focus-visible {
     &:not(&:disabled, .ax-state-disabled) {
-      @apply ax-text-default;
+      // @apply ax-text-default;
+      color: rgb(var(--ax-color-text-default));
     }
   }
 }

package/src/shared/_inputs.scss

@@ -1,10 +1,16 @@
 .ax-input {
+  // @apply ax-p-0 ax-outline-0;
   font-size: inherit;
-  @apply ax-p-0 ax-outline-0;
+  padding: 0px;
+  outline-width: 0px;
+
   &:focus {
-    @apply ax-outline-transparent;
+    // @apply ax-outline-transparent;
+    outline-color: transparent;
   }
   &.ax-state-disabled {
-    @apply ax-cursor-not-allowed ax-opacity-50;
+    // @apply ax-cursor-not-allowed ax-opacity-50;
+    cursor: not-allowed;
+    opacity: 0.5;
   }
 }

package/src/shared/_list.scss

@@ -2,83 +2,156 @@
 @include darkMode() {
   .ax-list-item {
     &.ax-state-selected {
-      @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
+      // @apply ax-bg-primary-800 ax-text-primary-fore #{!important};
+      background-color: rgba(var(--ax-color-primary-800)) !important;
+      color: rgba(var(--ax-color-primary-fore)) !important;
+
       .ax-selected-icon {
-        @apply ax-text-primary-fore;
+        // @apply ax-text-primary-fore;
+        color: rgba(var(--ax-color-primary-fore));
       }
     }
   }
 }
 .ax-list {
-  @apply ax-flex ax-h-full ax-flex-col ax-overflow-hidden ax-bg-surface ax-text-sm md:ax-max-h-80;
-
+  // @apply ax-flex ax-h-full ax-flex-col ax-overflow-hidden ax-bg-surface ax-text-sm md:ax-max-h-80;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: rgba(var(--ax-color-surface));
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  @media (min-width: 768px) {
+    max-height: 20rem /* 320px */;
+  }
   ax-header,
   ax-footer {
-    @apply ax-flex ax-items-center ax-justify-between ax-border-default ax-bg-surface;
+    // @apply ax-flex ax-items-center ax-justify-between ax-border-default ax-bg-surface;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
+    background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
   }
   ax-header {
-    @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
-
+    // @apply ax-border-b ax-border-default ax-p-4 ax-text-base ax-font-medium md:ax-text-lg;
+    border-bottom-width: 1px;
+    border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
+    padding: 1rem /* 16px */;
+    font-size: 1rem /* 16px */;
+    line-height: 1.5rem /* 24px */;
+    font-weight: 500;
+    @media (min-width: 768px) {
+      font-size: 1.125rem /* 18px */;
+      line-height: 1.75rem /* 28px */;
+    }
     ax-prefix,
     ax-suffix {
-      @apply ax-flex ax-flex-col ax-justify-items-start;
+      // @apply ax-flex ax-flex-col ax-justify-items-start;
+      display: flex;
+      flex-direction: column;
+      justify-items: start;
     }
     ax-prefix {
-      @apply ax-items-start;
+      // @apply ax-items-start;
+      align-items: flex-start;
     }
     ax-suffix {
-      @apply ax-items-end;
+      // @apply ax-items-end;
+      align-items: flex-end;
     }
   }
 
   ax-footer {
-    @apply ax-border-t;
+    // @apply ax-border-t;
+    border-top-width: 1px;
   }
 
   .ax-content {
-    @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
+    // @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
+    flex: 1 1 0%;
+    overflow-y: auto;
+    overflow-x: hidden;
 
     &.ax-list-items-container {
-      @apply ax-h-full ax-overflow-y-auto ax-py-2;
+      // @apply ax-h-full ax-overflow-y-auto ax-py-2;
+      height: 100%;
+      overflow-y: auto;
+      padding-top: 0.5rem /* 8px */;
+      padding-bottom: 0.5rem /* 8px */;
+
       &.ax-vertical {
-        @apply ax-grid ax-grid-cols-1;
+        // @apply ax-grid ax-grid-cols-1;
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr));
 
         &.ax-divide {
-          @apply ax-border-y;
+          // @apply ax-border-y;
+          border-top-width: 1px;
+          border-bottom-width: 1px;
         }
       }
 
       &.ax-default {
-        @apply ax-cursor-pointer;
+        // @apply ax-cursor-pointer;
+        cursor: pointer;
 
         .ax-list-item-group {
           & > span {
-            @apply ax-flex ax-items-center ax-p-3 ax-font-medium;
+            // @apply ax-flex ax-items-center ax-p-3 ax-font-medium;
+            display: flex;
+            align-items: center;
+            padding: 0.75rem /* 12px */;
+            font-weight: 500;
           }
 
           & > ul {
-            @apply ax-px-3;
+            // @apply ax-px-3;
+            padding-left: 0.75rem /* 12px */;
+            padding-right: 0.75rem /* 12px */;
           }
           .ax-list-item {
-            @apply ax-mb-1 ax-rounded-default;
+            // @apply ax-mb-1 ax-rounded-default;
+            margin-bottom: 0.25rem /* 4px */;
+            border-radius: var(--ax-rounded-border-default);
           }
         }
 
         .ax-list-item {
-          @apply ax-relative ax-flex ax-h-default ax-select-none ax-items-center ax-justify-between ax-pe-4 ax-ps-3 ax-text-base;
+          // @apply ax-relative ax-flex ax-h-default ax-select-none ax-items-center ax-justify-between ax-pe-4 ax-ps-3 ax-text-base;
+          position: relative;
+          display: flex;
+          height: var(--ax-size-default);
+          user-select: none;
+          align-items: center;
+          justify-content: space-between;
+          padding-inline-end: 1rem /* 16px */;
+          padding-inline-start: 0.75rem /* 12px */;
+          font-size: 1rem /* 16px */;
+          line-height: 1.5rem /* 24px */;
           &:focus,
           &:focus-visible {
-            @apply ax-outline-2 ax-outline-offset-2;
+            // @apply ax-outline-2 ax-outline-offset-2;
+            outline-width: 2px;
+            outline-offset: 2px;
           }
           &.ax-state-checkbox {
             .ax-checkbox-label {
-              @apply ax-ms-2;
+              // @apply ax-ms-2;
+              margin-inline-start: 0.5rem /* 8px */;
             }
           }
           &.ax-state-selected {
-            @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
+            // @apply ax-bg-primary-500 ax-text-primary-fore #{!important};
+            background-color: rgba(var(--ax-color-primary-500), var(--tw-bg-opacity)) !important;
+            color: rgba(var(--ax-color-primary-fore), var(--tw-text-opacity)) !important;
+
             .ax-selected-icon {
-              @apply ax-text-2xl ax-text-primary-500;
+              // @apply ax-text-2xl ax-text-primary-500;
+              font-size: 1.5rem /* 24px */;
+              line-height: 2rem /* 32px */;
+              color: rgba(var(--ax-color-primary-500));
             }
           }
 
@@ -88,32 +161,39 @@
           // }
 
           &.ax-state-disabled {
-            @apply ax-cursor-not-allowed ax-opacity-50;
+            // @apply ax-cursor-not-allowed ax-opacity-50;
+            cursor: not-allowed;
+            opacity: 0.5;
           }
 
           &:focus-visible,
           &:hover {
-            @apply ax-bg-on-surface;
+            // @apply ax-bg-on-surface;
+            background-color: rgba(var(--ax-color-on-surface));
           }
           &.ax-state-focus {
-            @apply ax-bg-on-surface;
+            // @apply ax-bg-on-surface;
+            background-color: rgba(var(--ax-color-on-surface));
           }
         }
       }
 
       .ax-list-loading-container {
-        @apply ax-flex ax-justify-center ax-p-2;
+        // @apply ax-flex ax-justify-center ax-p-2;
+        display: flex;
+        justify-content: center;
+        padding: 0.5rem /* 8px */;
       }
     }
   }
 
   .ax-search-box-container {
-    @apply ax-p-2;
+    // @apply ax-p-2;
+    padding: 0.5rem /* 8px */;
 
     &.ax-state-hidden {
-      @apply ax-hidden;
+      // @apply ax-hidden;
+      display: none;
     }
   }
-  ax-footer {
-  }
 }