cats-ui-lib 2.2.6 → 2.2.8

package/styles/_utilities.scss

@@ -1,894 +1,971 @@
-@use "./functions" as *;
-@use "./mixins" as *;
-
-.pointer {
-  cursor: pointer;
-}
-
-.d-none {
-  display: none;
-}
-
-// ---------------------------- THREE DOTS TRUNCATE TEXT ------------------------
-.textTruncate {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-// ------------------Button Styles--------------------
-button.cats-btn {
-  border: rem(1px) solid transparent;
-  padding: 0 rem(28px);
-  height: rem(56px);
-  min-width: rem(142px);
-  @include flex(center, center, rem(12px));
-  border-radius: rem(8px);
-  @include fontStyle(var(--fs-18), "", 600);
-  cursor: pointer;
-
-  &:focus-visible {
-    outline: none;
-    border: 0;
-  }
-
-  i-feather.icon {
-    display: flex;
-  }
-
-  &.primary_btn {
-    background-color: var(--text-link-default);
-    color: var(--surface-background-canvas);
-  }
-
-  &.secondary_btn {
-    background-color: var(--surface-background-subtle);
-    color: var(--text-body-primary);
-  }
-
-  &.outline_btn {
-    background-color: var(--surface-background-canvas);
-    color: var(--text-body-primary);
-    border: rem(1px) solid var(--border-core-strong);
-  }
-
-  &.disable {
-    pointer-events: none;
-    opacity: 0.6;
-  }
-
-  &.fill_lightBlue_btn {
-    background-color: var(--surface-background-blue);
-    color: var(--text-link-default);
-  }
-
-  &.disable_fill_lightBlue_btn {
-    background-color: var(--surface-background-blue);
-    color: var(--text-link-muted);
-    pointer-events: none;
-  }
-
-  &.bg_logic_btn {
-    background-color: var(--surface-background-canvas);
-    color: var(--text-body-primary);
-    border: rem(1px) solid var(--border-core-default);
-  }
-
-  &.no_outline_btn {
-    background-color: var(--surface-background-blue);
-    color: var(--text-link-default);
-    outline: none;
-  }
-
-  .close_outline_btn {
-    background-color: var(--surface-background-blue);
-    border: rem(1px) solid var(--surface-background-blue);
-    color: var(--text-link-default);
-  }
-}
-
-// ------------------Custom Tooltip Styles--------------------
-
-.default-tooltip-class {
-  position: relative;
-  display: inline-block;
-  padding: rem(8px) rem(12px);
-  background: var(--surface-background-canvas);
-  border-radius: rem(8px);
-  @include fontStyle(var(--fs-14), rem(24px), 400);
-  color: var(--text-body-primary);
-  box-shadow: 0 rem(4px) rem(15px) rgba(0, 0, 0, 0.15);
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: rem(-10px);
-    left: 50%;
-    @include box(rem(16px), rem(16px));
-    background: var(--surface-background-canvas);
-    transform: rotate(-135deg);
-    box-shadow: rem(4px) rem(4px) rem(6px) rgba(0, 0, 0, 0.1);
-    border-radius: rem(2px);
-    border: rem(1px) solid var(--border-core-muted);
-    border-top: 0;
-    border-left: 0;
-  }
-}
-
-/* Display Styles */
-.display-large {
-  @include fontStyle(rem(56px), rem(80px), 500);
-}
-
-.display-large-emphasized {
-  @include fontStyle(rem(56px), rem(80px), 600);
-}
-
-.display-medium {
-  @include fontStyle(rem(48px), rem(56px), 500);
-}
-
-.display-medium-emphasized {
-  @include fontStyle(rem(48px), rem(56px), 600);
-}
-
-/* Heading Styles */
-.heading-extra-large {
-  @include fontStyle(rem(36px), rem(40px), 500);
-}
-
-.heading-extra-large-emphasized {
-  @include fontStyle(rem(36px), rem(40px), 600);
-}
-
-.heading-large {
-  @include fontStyle(rem(24px), rem(32px), 500);
-}
-
-.heading-large-emphasized {
-  @include fontStyle(rem(24px), rem(32px), 600);
-}
-
-.heading-medium {
-  @include fontStyle(rem(20px), rem(28px), 500);
-}
-
-.heading-medium-emphasized {
-  @include fontStyle(rem(20px), rem(28px), 600);
-}
-
-.heading-small {
-  @include fontStyle(rem(18px), rem(28px), 500);
-}
-
-.heading-small-emphasized {
-  @include fontStyle(rem(18px), rem(28px), 600);
-}
-
-/* Body Styles */
-.body-large {
-  @include fontStyle(rem(16px), rem(24px));
-}
-
-.body-large-emphasized {
-  @include fontStyle(rem(16px), rem(24px), 500);
-}
-
-.body-medium {
-  @include fontStyle(rem(14px), rem(20px));
-}
-
-.body-medium-emphasized {
-  @include fontStyle(rem(14px), rem(20px), 500);
-}
-
-.body-small {
-  @include fontStyle(rem(12px), rem(18px));
-}
-
-/* Meta Styles */
-.meta-regular {
-  @include fontStyle(rem(14px), rem(20px), 500);
-}
-
-.meta-regular-emphasized {
-  @include fontStyle(rem(14px), rem(20px), 600);
-}
-
-/* Interaction Styles */
-.interaction-medium {
-  @include fontStyle(rem(14px), rem(20px), 500);
-}
-
-.interaction-small {
-  @include fontStyle(rem(12px), rem(20px), 500);
-}
-
-/* System Utility Styles */
-.system-utility-regular {
-  @include fontStyle(rem(12px), rem(18px), 500);
-}
-
-.system-utility-regular-emphasized {
-  @include fontStyle(rem(12px), rem(18px), 600);
-}
-
-.system-utility-small {
-  @include fontStyle(rem(10px), rem(12px), 500);
-}
-
-/* Font Weight Utility Classes */
-.font-weight-regular {
-  font-weight: 400;
-}
-
-.font-weight-medium {
-  font-weight: 500;
-}
-
-.font-weight-semibold {
-  font-weight: 600;
-}
-
-/* Padding Classes (sp prefix) */
-.sp-0 {
-  padding: rem(0px);
-}
-
-.sp-2 {
-  padding: rem(2px);
-}
-
-.sp-4 {
-  padding: rem(4px);
-}
-
-.sp-8 {
-  padding: rem(8px);
-}
-
-.sp-12 {
-  padding: rem(12px);
-}
-
-.sp-16 {
-  padding: rem(16px);
-}
-
-.sp-24 {
-  padding: rem(24px);
-}
-
-.sp-36 {
-  padding: rem(36px);
-}
-
-.sp-40 {
-  padding: rem(40px);
-}
-
-/* Margin Classes (sm prefix) */
-.sm-0 {
-  margin: rem(0px);
-}
-
-.sm-2 {
-  margin: rem(2px);
-}
-
-.sm-4 {
-  margin: rem(4px);
-}
-
-.sm-8 {
-  margin: rem(8px);
-}
-
-.sm-12 {
-  margin: rem(12px);
-}
-
-.sm-16 {
-  margin: rem(16px);
-}
-
-.sm-24 {
-  margin: rem(24px);
-}
-
-.sm-36 {
-  margin: rem(36px);
-}
-
-.sm-40 {
-  margin: rem(40px);
-}
-
-/* Directional Padding */
-.sp-t-0 {
-  padding-top: rem(0px);
-}
-
-.sp-t-2 {
-  padding-top: rem(2px);
-}
-
-.sp-t-4 {
-  padding-top: rem(4px);
-}
-
-.sp-t-8 {
-  padding-top: rem(8px);
-}
-
-.sp-t-12 {
-  padding-top: rem(12px);
-}
-
-.sp-t-16 {
-  padding-top: rem(16px);
-}
-
-.sp-t-24 {
-  padding-top: rem(24px);
-}
-
-.sp-t-36 {
-  padding-top: rem(36px);
-}
-
-.sp-t-40 {
-  padding-top: rem(40px);
-}
-
-.sp-b-0 {
-  padding-bottom: rem(0px);
-}
-
-.sp-b-2 {
-  padding-bottom: rem(2px);
-}
-
-.sp-b-4 {
-  padding-bottom: rem(4px);
-}
-
-.sp-b-8 {
-  padding-bottom: rem(8px);
-}
-
-.sp-b-12 {
-  padding-bottom: rem(12px);
-}
-
-.sp-b-16 {
-  padding-bottom: rem(16px);
-}
-
-.sp-b-24 {
-  padding-bottom: rem(24px);
-}
-
-.sp-b-36 {
-  padding-bottom: rem(36px);
-}
-
-.sp-b-40 {
-  padding-bottom: rem(40px);
-}
-
-.sp-l-0 {
-  padding-left: rem(0px);
-}
-
-.sp-l-2 {
-  padding-left: rem(2px);
-}
-
-.sp-l-4 {
-  padding-left: rem(4px);
-}
-
-.sp-l-8 {
-  padding-left: rem(8px);
-}
-
-.sp-l-12 {
-  padding-left: rem(12px);
-}
-
-.sp-l-16 {
-  padding-left: rem(16px);
-}
-
-.sp-l-24 {
-  padding-left: rem(24px);
-}
-
-.sp-l-36 {
-  padding-left: rem(36px);
-}
-
-.sp-l-40 {
-  padding-left: rem(40px);
-}
-
-.sp-r-0 {
-  padding-right: rem(0px);
-}
-
-.sp-r-2 {
-  padding-right: rem(2px);
-}
-
-.sp-r-4 {
-  padding-right: rem(4px);
-}
-
-.sp-r-8 {
-  padding-right: rem(8px);
-}
-
-.sp-r-12 {
-  padding-right: rem(12px);
-}
-
-.sp-r-16 {
-  padding-right: rem(16px);
-}
-
-.sp-r-24 {
-  padding-right: rem(24px);
-}
-
-.sp-r-36 {
-  padding-right: rem(36px);
-}
-
-.sp-r-40 {
-  padding-right: rem(40px);
-}
-
-/* Directional Margin */
-.sm-t-0 {
-  margin-top: rem(0px);
-}
-
-.sm-t-2 {
-  margin-top: rem(2px);
-}
-
-.sm-t-4 {
-  margin-top: rem(4px);
-}
-
-.sm-t-8 {
-  margin-top: rem(8px);
-}
-
-.sm-t-12 {
-  margin-top: rem(12px);
-}
-
-.sm-t-16 {
-  margin-top: rem(16px);
-}
-
-.sm-t-24 {
-  margin-top: rem(24px);
-}
-
-.sm-t-36 {
-  margin-top: rem(36px);
-}
-
-.sm-t-40 {
-  margin-top: rem(40px);
-}
-
-.sm-b-0 {
-  margin-bottom: rem(0px);
-}
-
-.sm-b-2 {
-  margin-bottom: rem(2px);
-}
-
-.sm-b-4 {
-  margin-bottom: rem(4px);
-}
-
-.sm-b-8 {
-  margin-bottom: rem(8px);
-}
-
-.sm-b-12 {
-  margin-bottom: rem(12px);
-}
-
-.sm-b-16 {
-  margin-bottom: rem(16px);
-}
-
-.sm-b-24 {
-  margin-bottom: rem(24px);
-}
-
-.sm-b-36 {
-  margin-bottom: rem(36px);
-}
-
-.sm-b-40 {
-  margin-bottom: rem(40px);
-}
-
-.sm-l-0 {
-  margin-left: rem(0px);
-}
-
-.sm-l-2 {
-  margin-left: rem(2px);
-}
-
-.sm-l-4 {
-  margin-left: rem(4px);
-}
-
-.sm-l-8 {
-  margin-left: rem(8px);
-}
-
-.sm-l-12 {
-  margin-left: rem(12px);
-}
-
-.sm-l-16 {
-  margin-left: rem(16px);
-}
-
-.sm-l-24 {
-  margin-left: rem(24px);
-}
-
-.sm-l-36 {
-  margin-left: rem(36px);
-}
-
-.sm-l-40 {
-  margin-left: rem(40px);
-}
-
-.sm-r-0 {
-  margin-right: rem(0px);
-}
-
-.sm-r-2 {
-  margin-right: rem(2px);
-}
-
-.sm-r-4 {
-  margin-right: rem(4px);
-}
-
-.sm-r-8 {
-  margin-right: rem(8px);
-}
-
-.sm-r-12 {
-  margin-right: rem(12px);
-}
-
-.sm-r-16 {
-  margin-right: rem(16px);
-}
-
-.sm-r-24 {
-  margin-right: rem(24px);
-}
-
-.sm-r-36 {
-  margin-right: rem(36px);
-}
-
-.sm-r-40 {
-  margin-right: rem(40px);
-}
-
-/* Horizontal & Vertical Spacing */
-.sp-x-0 {
-  padding-left: rem(0px);
-  padding-right: rem(0px);
-}
-
-.sp-x-2 {
-  padding-left: rem(2px);
-  padding-right: rem(2px);
-}
-
-.sp-x-4 {
-  padding-left: rem(4px);
-  padding-right: rem(4px);
-}
-
-.sp-x-8 {
-  padding-left: rem(8px);
-  padding-right: rem(8px);
-}
-
-.sp-x-12 {
-  padding-left: rem(12px);
-  padding-right: rem(12px);
-}
-
-.sp-x-16 {
-  padding-left: rem(16px);
-  padding-right: rem(16px);
-}
-
-.sp-x-24 {
-  padding-left: rem(24px);
-  padding-right: rem(24px);
-}
-
-.sp-x-36 {
-  padding-left: rem(36px);
-  padding-right: rem(36px);
-}
-
-.sp-x-40 {
-  padding-left: rem(40px);
-  padding-right: rem(40px);
-}
-
-.sp-y-0 {
-  padding-top: rem(0px);
-  padding-bottom: rem(0px);
-}
-
-.sp-y-2 {
-  padding-top: rem(2px);
-  padding-bottom: rem(2px);
-}
-
-.sp-y-4 {
-  padding-top: rem(4px);
-  padding-bottom: rem(4px);
-}
-
-.sp-y-8 {
-  padding-top: rem(8px);
-  padding-bottom: rem(8px);
-}
-
-.sp-y-12 {
-  padding-top: rem(12px);
-  padding-bottom: rem(12px);
-}
-
-.sp-y-16 {
-  padding-top: rem(16px);
-  padding-bottom: rem(16px);
-}
-
-.sp-y-24 {
-  padding-top: rem(24px);
-  padding-bottom: rem(24px);
-}
-
-.sp-y-36 {
-  padding-top: rem(36px);
-  padding-bottom: rem(36px);
-}
-
-.sp-y-40 {
-  padding-top: rem(40px);
-  padding-bottom: rem(40px);
-}
-
-/* Horizontal & Vertical Margin */
-.sm-x-0 {
-  margin-left: rem(0px);
-  margin-right: rem(0px);
-}
-
-.sm-x-2 {
-  margin-left: rem(2px);
-  margin-right: rem(2px);
-}
-
-.sm-x-4 {
-  margin-left: rem(4px);
-  margin-right: rem(4px);
-}
-
-.sm-x-8 {
-  margin-left: rem(8px);
-  margin-right: rem(8px);
-}
-
-.sm-x-12 {
-  margin-left: rem(12px);
-  margin-right: rem(12px);
-}
-
-.sm-x-16 {
-  margin-left: rem(16px);
-  margin-right: rem(16px);
-}
-
-.sm-x-24 {
-  margin-left: rem(24px);
-  margin-right: rem(24px);
-}
-
-.sm-x-36 {
-  margin-left: rem(36px);
-  margin-right: rem(36px);
-}
-
-.sm-x-40 {
-  margin-left: rem(40px);
-  margin-right: rem(40px);
-}
-
-.sm-y-0 {
-  margin-top: rem(0px);
-  margin-bottom: rem(0px);
-}
-
-.sm-y-2 {
-  margin-top: rem(2px);
-  margin-bottom: rem(2px);
-}
-
-.sm-y-4 {
-  margin-top: rem(4px);
-  margin-bottom: rem(4px);
-}
-
-.sm-y-8 {
-  margin-top: rem(8px);
-  margin-bottom: rem(8px);
-}
-
-.sm-y-12 {
-  margin-top: rem(12px);
-  margin-bottom: rem(12px);
-}
-
-.sm-y-16 {
-  margin-top: rem(16px);
-  margin-bottom: rem(16px);
-}
-
-.sm-y-24 {
-  margin-top: rem(24px);
-  margin-bottom: rem(24px);
-}
-
-.sm-y-36 {
-  margin-top: rem(36px);
-  margin-bottom: rem(36px);
-}
-
-.sm-y-40 {
-  margin-top: rem(40px);
-  margin-bottom: rem(40px);
-}
-
-.br-0 {
-  border-radius: rem(0px);
-}
-
-.br-4 {
-  border-radius: rem(4px);
-}
-
-.br-8 {
-  border-radius: rem(8px);
-}
-
-.br-16 {
-  border-radius: rem(16px);
-}
-
-.br-24 {
-  border-radius: rem(24px);
-}
-
-.br-36 {
-  border-radius: rem(36px);
-}
-
-.br-200 {
-  border-radius: rem(200px);
-}
-
-// ------------------Checkbox Styles--------------------
-.cats-checkbox-container,
-.cats-item,
-.cats-multiitem {
-  @include flex(flex-start, center, rem(8px));
-  @include fontStyle(var(--fs-16), rem(20px), 400);
-  margin-bottom: rem(8px);
-  color: var(--text-heading-primary);
-  &.disabled-option {
-    color: var(--text-body-muted);
-    pointer-events: none;
-    input[type="checkbox"]:checked {
-      background-color: var(--surface-background-subtle);
-      border-color: var(--border-core-default);
-      &::after {
-        background-image: url(/images/check-disabled.svg);
-      }
-    }
-    &::selection {
-      background-color: transparent;
-    }
-  }
-
-  input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    @include box(rem(16px), rem(16px));
-    min-width: rem(16px);
-    @include border();
-    cursor: pointer;
-    background-color: var(--surface-background-canvas);
-    position: relative;
-    transition: all 0.2s ease;
-
-    // --- Default (unchecked) ---
-    &::after {
-      content: "";
-      display: none;
-      position: absolute;
-      @include position(rem(-1px), rem(-1px));
-      @include box(rem(16px), rem(16px));
-      background-size: auto;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-    // --- Checked State ---
-    &:checked {
-      border-color: var(--border-interaction-focus);
-      background-color: var(--surface-action-default);
-      &::after {
-        display: block;
-        background-image: url("/images/check-white.svg");
-        background-size: rem(8px) rem(6px);
-      }
-    }
-    // --- Indeterminate (minus) state ---
-    &:indeterminate {
-      border-color: var(--border-interaction-focus);
-      background-color: var(--surface-background-canvas);
-      &::after {
-        display: block;
-        top: 0;
-        background-image: url("/images/minus-blue.svg");
-        background-size: rem(7px) rem(1px);
-      }
-    }
-    // Disabled (unchecked)
-    &:disabled {
-      cursor: default;
-      background-color: var(--surface-background-default);
-      border-color: var(--border-core-muted);
-      & + span {
-        color: var(--text-body-muted);
-      }
-    }
-
-    //  Disabled + Checked (IMPORTANT)
-    &:checked:disabled {
-      background-color: var(--surface-background-default);
-      border-color: var(--border-core-muted);
-
-      &::after {
-        display: block;
-        background-image: url("/images/check-disabled.svg");
-      }
-    }
-  }
-}
+@use "./functions" as *;
+@use "./mixins" as *;
+
+.pointer {
+  cursor: pointer;
+}
+
+.d-none {
+  display: none;
+}
+
+// ---------------------------- THREE DOTS TRUNCATE TEXT ------------------------
+.textTruncate {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+// ------------------Button Styles--------------------
+button.cats-btn {
+  border: rem(1px) solid transparent;
+  padding: rem(13px) rem(15px);
+  height: rem(48px);
+  min-width: rem(108px);
+  @include flex(center, center, rem(8px));
+  border-radius: rem(8px);
+  @include fontStyle(var(--fs-14), rem(20px));
+  cursor: pointer;
+  transition: all 0.5s ease;
+  &.only-icon {
+    min-width: rem(48px);
+    padding: rem(11px);
+  }
+  img.btn-icon {
+    @include box(rem(24px), rem(24px));
+  }
+  &.small {
+    height: rem(32px);
+    padding: rem(5px) rem(15px);
+    img.btn-icon {
+      @include box(rem(16px), rem(16px));
+    }
+  }
+  //for primary button
+  &.primary-btn {
+    background-color: var(--surface-action-default);
+    color: var(--surface-background-canvas);
+    border-color: var(--border-interaction-focus);
+    &:hover {
+      background-color: var(--surface-action-hover);
+      border-color: var(--surface-action-hover);
+    }
+    &:focus-visible,
+    &:focus,
+    &:focus-within {
+      outline: rem(2px) solid var(--text-link-muted);
+      border: 0;
+    }
+  }
+
+  //for Secondary button
+  &.secondary-btn {
+    background-color: var(--surface-background-canvas);
+    color: var(--text-body-primary);
+    border-color: var(--border-core-strong);
+    &:hover {
+      background-color: var(--surface-background-blue);
+      border-color: var(--border-interaction-focus);
+      color: var(--text-link-default);
+    }
+    &:focus-visible,
+    &:focus,
+    &:focus-within {
+      box-shadow: 0 0 0 rem(2px) var(--border-core-muted);
+      outline: 0;
+      border-color: var(--border-core-strong);
+    }
+  }
+
+  //for Tertiary button
+  &.tertiary-btn {
+    background-color: var(--surface-background-blue);
+    border-color: var(--border-interaction-focus);
+    color: var(--text-link-default);
+    &:hover {
+      background-color: var(--blue-100);
+    }
+    &:focus-visible,
+    &:focus,
+    &:focus-within {
+      box-shadow: 0 0 0 rem(2px) var(--text-link-muted);
+      outline: 0;
+      border-color: var(--border-interaction-focus);
+    }
+  }
+  //for Link button
+  &.link-btn {
+    background-color: var(--surface-background-canvas);
+    color: var(--text-link-default);
+    &:hover {
+      color: var(--text-link-hover);
+    }
+    &:focus-visible,
+    &:focus,
+    &:focus-within {
+      outline: 0;
+      border-color: 0;
+      background-color: var(--surface-background-blue);
+    }
+    &.disable,
+    &:disabled {
+      pointer-events: none;
+      background: var(--surface-background-canvas);
+      color: var(--text-body-muted);
+      border: rem(1px) solid transparent;
+    }
+  }
+
+  &.disable,
+  &:disabled {
+    pointer-events: none;
+    // opacity: 0.6;
+    background: var(--surface-background-default);
+    color: var(--text-body-muted);
+    border: rem(1px) solid var(--border-core-strong);
+    img.btn-icon {
+      opacity: 0.2;
+    }
+  }
+
+  // &.outline_btn {
+  //   background-color: var(--surface-background-canvas);
+  //   color: var(--text-body-primary);
+  //   border: rem(1px) solid var(--border-core-strong);
+  // }
+
+  // &.fill_lightBlue_btn {
+  //   background-color: var(--surface-background-blue);
+  //   color: var(--text-link-default);
+  // }
+
+  // &.disable_fill_lightBlue_btn {
+  //   background-color: var(--surface-background-blue);
+  //   color: var(--text-link-muted);
+  //   pointer-events: none;
+  // }
+
+  // &.bg_logic_btn {
+  //   background-color: var(--surface-background-canvas);
+  //   color: var(--text-body-primary);
+  //   border: rem(1px) solid var(--border-core-default);
+  // }
+
+  // &.no_outline_btn {
+  //   background-color: var(--surface-background-blue);
+  //   color: var(--text-link-default);
+  //   outline: none;
+  // }
+
+  // .close_outline_btn {
+  //   background-color: var(--surface-background-blue);
+  //   border: rem(1px) solid var(--surface-background-blue);
+  //   color: var(--text-link-default);
+  // }
+}
+
+// ------------------Custom Tooltip Styles--------------------
+
+.default-tooltip-class {
+  position: relative;
+  display: inline-block;
+  padding: rem(8px) rem(12px);
+  background: var(--surface-background-canvas);
+  border-radius: rem(8px);
+  @include fontStyle(var(--fs-14), rem(24px), 400);
+  color: var(--text-body-primary);
+  box-shadow: 0 rem(4px) rem(15px) rgba(0, 0, 0, 0.15);
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: rem(-10px);
+    left: 50%;
+    @include box(rem(16px), rem(16px));
+    background: var(--surface-background-canvas);
+    transform: rotate(-135deg);
+    box-shadow: rem(4px) rem(4px) rem(6px) rgba(0, 0, 0, 0.1);
+    border-radius: rem(2px);
+    border: rem(1px) solid var(--border-core-muted);
+    border-top: 0;
+    border-left: 0;
+  }
+}
+
+/* Display Styles */
+.display-large {
+  @include fontStyle(rem(56px), rem(80px), 500);
+}
+
+.display-large-emphasized {
+  @include fontStyle(rem(56px), rem(80px), 600);
+}
+
+.display-medium {
+  @include fontStyle(rem(48px), rem(56px), 500);
+}
+
+.display-medium-emphasized {
+  @include fontStyle(rem(48px), rem(56px), 600);
+}
+
+/* Heading Styles */
+.heading-extra-large {
+  @include fontStyle(rem(36px), rem(40px), 500);
+}
+
+.heading-extra-large-emphasized {
+  @include fontStyle(rem(36px), rem(40px), 600);
+}
+
+.heading-large {
+  @include fontStyle(rem(24px), rem(32px), 500);
+}
+
+.heading-large-emphasized {
+  @include fontStyle(rem(24px), rem(32px), 600);
+}
+
+.heading-medium {
+  @include fontStyle(rem(20px), rem(28px), 500);
+}
+
+.heading-medium-emphasized {
+  @include fontStyle(rem(20px), rem(28px), 600);
+}
+
+.heading-small {
+  @include fontStyle(rem(18px), rem(28px), 500);
+}
+
+.heading-small-emphasized {
+  @include fontStyle(rem(18px), rem(28px), 600);
+}
+
+/* Body Styles */
+.body-large {
+  @include fontStyle(rem(16px), rem(24px));
+}
+
+.body-large-emphasized {
+  @include fontStyle(rem(16px), rem(24px), 500);
+}
+
+.body-medium {
+  @include fontStyle(rem(14px), rem(20px));
+}
+
+.body-medium-emphasized {
+  @include fontStyle(rem(14px), rem(20px), 500);
+}
+
+.body-small {
+  @include fontStyle(rem(12px), rem(18px));
+}
+
+/* Meta Styles */
+.meta-regular {
+  @include fontStyle(rem(14px), rem(20px), 500);
+}
+
+.meta-regular-emphasized {
+  @include fontStyle(rem(14px), rem(20px), 600);
+}
+
+/* Interaction Styles */
+.interaction-medium {
+  @include fontStyle(rem(14px), rem(20px), 500);
+}
+
+.interaction-small {
+  @include fontStyle(rem(12px), rem(20px), 500);
+}
+
+/* System Utility Styles */
+.system-utility-regular {
+  @include fontStyle(rem(12px), rem(18px), 500);
+}
+
+.system-utility-regular-emphasized {
+  @include fontStyle(rem(12px), rem(18px), 600);
+}
+
+.system-utility-small {
+  @include fontStyle(rem(10px), rem(12px), 500);
+}
+
+/* Font Weight Utility Classes */
+.font-weight-regular {
+  font-weight: 400;
+}
+
+.font-weight-medium {
+  font-weight: 500;
+}
+
+.font-weight-semibold {
+  font-weight: 600;
+}
+
+/* Padding Classes (sp prefix) */
+.sp-0 {
+  padding: rem(0px);
+}
+
+.sp-2 {
+  padding: rem(2px);
+}
+
+.sp-4 {
+  padding: rem(4px);
+}
+
+.sp-8 {
+  padding: rem(8px);
+}
+
+.sp-12 {
+  padding: rem(12px);
+}
+
+.sp-16 {
+  padding: rem(16px);
+}
+
+.sp-24 {
+  padding: rem(24px);
+}
+
+.sp-36 {
+  padding: rem(36px);
+}
+
+.sp-40 {
+  padding: rem(40px);
+}
+
+/* Margin Classes (sm prefix) */
+.sm-0 {
+  margin: rem(0px);
+}
+
+.sm-2 {
+  margin: rem(2px);
+}
+
+.sm-4 {
+  margin: rem(4px);
+}
+
+.sm-8 {
+  margin: rem(8px);
+}
+
+.sm-12 {
+  margin: rem(12px);
+}
+
+.sm-16 {
+  margin: rem(16px);
+}
+
+.sm-24 {
+  margin: rem(24px);
+}
+
+.sm-36 {
+  margin: rem(36px);
+}
+
+.sm-40 {
+  margin: rem(40px);
+}
+
+/* Directional Padding */
+.sp-t-0 {
+  padding-top: rem(0px);
+}
+
+.sp-t-2 {
+  padding-top: rem(2px);
+}
+
+.sp-t-4 {
+  padding-top: rem(4px);
+}
+
+.sp-t-8 {
+  padding-top: rem(8px);
+}
+
+.sp-t-12 {
+  padding-top: rem(12px);
+}
+
+.sp-t-16 {
+  padding-top: rem(16px);
+}
+
+.sp-t-24 {
+  padding-top: rem(24px);
+}
+
+.sp-t-36 {
+  padding-top: rem(36px);
+}
+
+.sp-t-40 {
+  padding-top: rem(40px);
+}
+
+.sp-b-0 {
+  padding-bottom: rem(0px);
+}
+
+.sp-b-2 {
+  padding-bottom: rem(2px);
+}
+
+.sp-b-4 {
+  padding-bottom: rem(4px);
+}
+
+.sp-b-8 {
+  padding-bottom: rem(8px);
+}
+
+.sp-b-12 {
+  padding-bottom: rem(12px);
+}
+
+.sp-b-16 {
+  padding-bottom: rem(16px);
+}
+
+.sp-b-24 {
+  padding-bottom: rem(24px);
+}
+
+.sp-b-36 {
+  padding-bottom: rem(36px);
+}
+
+.sp-b-40 {
+  padding-bottom: rem(40px);
+}
+
+.sp-l-0 {
+  padding-left: rem(0px);
+}
+
+.sp-l-2 {
+  padding-left: rem(2px);
+}
+
+.sp-l-4 {
+  padding-left: rem(4px);
+}
+
+.sp-l-8 {
+  padding-left: rem(8px);
+}
+
+.sp-l-12 {
+  padding-left: rem(12px);
+}
+
+.sp-l-16 {
+  padding-left: rem(16px);
+}
+
+.sp-l-24 {
+  padding-left: rem(24px);
+}
+
+.sp-l-36 {
+  padding-left: rem(36px);
+}
+
+.sp-l-40 {
+  padding-left: rem(40px);
+}
+
+.sp-r-0 {
+  padding-right: rem(0px);
+}
+
+.sp-r-2 {
+  padding-right: rem(2px);
+}
+
+.sp-r-4 {
+  padding-right: rem(4px);
+}
+
+.sp-r-8 {
+  padding-right: rem(8px);
+}
+
+.sp-r-12 {
+  padding-right: rem(12px);
+}
+
+.sp-r-16 {
+  padding-right: rem(16px);
+}
+
+.sp-r-24 {
+  padding-right: rem(24px);
+}
+
+.sp-r-36 {
+  padding-right: rem(36px);
+}
+
+.sp-r-40 {
+  padding-right: rem(40px);
+}
+
+/* Directional Margin */
+.sm-t-0 {
+  margin-top: rem(0px);
+}
+
+.sm-t-2 {
+  margin-top: rem(2px);
+}
+
+.sm-t-4 {
+  margin-top: rem(4px);
+}
+
+.sm-t-8 {
+  margin-top: rem(8px);
+}
+
+.sm-t-12 {
+  margin-top: rem(12px);
+}
+
+.sm-t-16 {
+  margin-top: rem(16px);
+}
+
+.sm-t-24 {
+  margin-top: rem(24px);
+}
+
+.sm-t-36 {
+  margin-top: rem(36px);
+}
+
+.sm-t-40 {
+  margin-top: rem(40px);
+}
+
+.sm-b-0 {
+  margin-bottom: rem(0px);
+}
+
+.sm-b-2 {
+  margin-bottom: rem(2px);
+}
+
+.sm-b-4 {
+  margin-bottom: rem(4px);
+}
+
+.sm-b-8 {
+  margin-bottom: rem(8px);
+}
+
+.sm-b-12 {
+  margin-bottom: rem(12px);
+}
+
+.sm-b-16 {
+  margin-bottom: rem(16px);
+}
+
+.sm-b-24 {
+  margin-bottom: rem(24px);
+}
+
+.sm-b-36 {
+  margin-bottom: rem(36px);
+}
+
+.sm-b-40 {
+  margin-bottom: rem(40px);
+}
+
+.sm-l-0 {
+  margin-left: rem(0px);
+}
+
+.sm-l-2 {
+  margin-left: rem(2px);
+}
+
+.sm-l-4 {
+  margin-left: rem(4px);
+}
+
+.sm-l-8 {
+  margin-left: rem(8px);
+}
+
+.sm-l-12 {
+  margin-left: rem(12px);
+}
+
+.sm-l-16 {
+  margin-left: rem(16px);
+}
+
+.sm-l-24 {
+  margin-left: rem(24px);
+}
+
+.sm-l-36 {
+  margin-left: rem(36px);
+}
+
+.sm-l-40 {
+  margin-left: rem(40px);
+}
+
+.sm-r-0 {
+  margin-right: rem(0px);
+}
+
+.sm-r-2 {
+  margin-right: rem(2px);
+}
+
+.sm-r-4 {
+  margin-right: rem(4px);
+}
+
+.sm-r-8 {
+  margin-right: rem(8px);
+}
+
+.sm-r-12 {
+  margin-right: rem(12px);
+}
+
+.sm-r-16 {
+  margin-right: rem(16px);
+}
+
+.sm-r-24 {
+  margin-right: rem(24px);
+}
+
+.sm-r-36 {
+  margin-right: rem(36px);
+}
+
+.sm-r-40 {
+  margin-right: rem(40px);
+}
+
+/* Horizontal & Vertical Spacing */
+.sp-x-0 {
+  padding-left: rem(0px);
+  padding-right: rem(0px);
+}
+
+.sp-x-2 {
+  padding-left: rem(2px);
+  padding-right: rem(2px);
+}
+
+.sp-x-4 {
+  padding-left: rem(4px);
+  padding-right: rem(4px);
+}
+
+.sp-x-8 {
+  padding-left: rem(8px);
+  padding-right: rem(8px);
+}
+
+.sp-x-12 {
+  padding-left: rem(12px);
+  padding-right: rem(12px);
+}
+
+.sp-x-16 {
+  padding-left: rem(16px);
+  padding-right: rem(16px);
+}
+
+.sp-x-24 {
+  padding-left: rem(24px);
+  padding-right: rem(24px);
+}
+
+.sp-x-36 {
+  padding-left: rem(36px);
+  padding-right: rem(36px);
+}
+
+.sp-x-40 {
+  padding-left: rem(40px);
+  padding-right: rem(40px);
+}
+
+.sp-y-0 {
+  padding-top: rem(0px);
+  padding-bottom: rem(0px);
+}
+
+.sp-y-2 {
+  padding-top: rem(2px);
+  padding-bottom: rem(2px);
+}
+
+.sp-y-4 {
+  padding-top: rem(4px);
+  padding-bottom: rem(4px);
+}
+
+.sp-y-8 {
+  padding-top: rem(8px);
+  padding-bottom: rem(8px);
+}
+
+.sp-y-12 {
+  padding-top: rem(12px);
+  padding-bottom: rem(12px);
+}
+
+.sp-y-16 {
+  padding-top: rem(16px);
+  padding-bottom: rem(16px);
+}
+
+.sp-y-24 {
+  padding-top: rem(24px);
+  padding-bottom: rem(24px);
+}
+
+.sp-y-36 {
+  padding-top: rem(36px);
+  padding-bottom: rem(36px);
+}
+
+.sp-y-40 {
+  padding-top: rem(40px);
+  padding-bottom: rem(40px);
+}
+
+/* Horizontal & Vertical Margin */
+.sm-x-0 {
+  margin-left: rem(0px);
+  margin-right: rem(0px);
+}
+
+.sm-x-2 {
+  margin-left: rem(2px);
+  margin-right: rem(2px);
+}
+
+.sm-x-4 {
+  margin-left: rem(4px);
+  margin-right: rem(4px);
+}
+
+.sm-x-8 {
+  margin-left: rem(8px);
+  margin-right: rem(8px);
+}
+
+.sm-x-12 {
+  margin-left: rem(12px);
+  margin-right: rem(12px);
+}
+
+.sm-x-16 {
+  margin-left: rem(16px);
+  margin-right: rem(16px);
+}
+
+.sm-x-24 {
+  margin-left: rem(24px);
+  margin-right: rem(24px);
+}
+
+.sm-x-36 {
+  margin-left: rem(36px);
+  margin-right: rem(36px);
+}
+
+.sm-x-40 {
+  margin-left: rem(40px);
+  margin-right: rem(40px);
+}
+
+.sm-y-0 {
+  margin-top: rem(0px);
+  margin-bottom: rem(0px);
+}
+
+.sm-y-2 {
+  margin-top: rem(2px);
+  margin-bottom: rem(2px);
+}
+
+.sm-y-4 {
+  margin-top: rem(4px);
+  margin-bottom: rem(4px);
+}
+
+.sm-y-8 {
+  margin-top: rem(8px);
+  margin-bottom: rem(8px);
+}
+
+.sm-y-12 {
+  margin-top: rem(12px);
+  margin-bottom: rem(12px);
+}
+
+.sm-y-16 {
+  margin-top: rem(16px);
+  margin-bottom: rem(16px);
+}
+
+.sm-y-24 {
+  margin-top: rem(24px);
+  margin-bottom: rem(24px);
+}
+
+.sm-y-36 {
+  margin-top: rem(36px);
+  margin-bottom: rem(36px);
+}
+
+.sm-y-40 {
+  margin-top: rem(40px);
+  margin-bottom: rem(40px);
+}
+
+.br-0 {
+  border-radius: rem(0px);
+}
+
+.br-4 {
+  border-radius: rem(4px);
+}
+
+.br-8 {
+  border-radius: rem(8px);
+}
+
+.br-16 {
+  border-radius: rem(16px);
+}
+
+.br-24 {
+  border-radius: rem(24px);
+}
+
+.br-36 {
+  border-radius: rem(36px);
+}
+
+.br-200 {
+  border-radius: rem(200px);
+}
+
+// ------------------Checkbox Styles--------------------
+.cats-checkbox-container,
+.cats-item,
+.cats-multiitem {
+  @include flex(flex-start, center, rem(8px));
+  @include fontStyle(var(--fs-16), rem(20px), 400);
+  margin-bottom: rem(8px);
+  color: var(--text-heading-primary);
+  &.disabled-option {
+    color: var(--text-body-muted);
+    pointer-events: none;
+    input[type="checkbox"]:checked {
+      background-color: var(--surface-background-subtle);
+      border-color: var(--border-core-default);
+      &::after {
+        background-image: url(/images/check-disabled.svg);
+      }
+    }
+    &::selection {
+      background-color: transparent;
+    }
+  }
+
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    @include box(rem(16px), rem(16px));
+    min-width: rem(16px);
+    @include border();
+    cursor: pointer;
+    background-color: var(--surface-background-canvas);
+    position: relative;
+    transition: all 0.2s ease;
+
+    // --- Default (unchecked) ---
+    &::after {
+      content: "";
+      display: none;
+      position: absolute;
+      @include position(rem(-1px), rem(-1px));
+      @include box(rem(16px), rem(16px));
+      background-size: auto;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    // --- Checked State ---
+    &:checked {
+      border-color: var(--border-interaction-focus);
+      background-color: var(--surface-action-default);
+      &::after {
+        display: block;
+        background-image: url("/images/check-white.svg");
+        background-size: rem(8px) rem(6px);
+      }
+    }
+    // --- Indeterminate (minus) state ---
+    &:indeterminate {
+      border-color: var(--border-interaction-focus);
+      background-color: var(--surface-background-canvas);
+      &::after {
+        display: block;
+        top: 0;
+        background-image: url("/images/minus-blue.svg");
+        background-size: rem(7px) rem(1px);
+      }
+    }
+    // Disabled (unchecked)
+    &:disabled {
+      cursor: default;
+      background-color: var(--surface-background-default);
+      border-color: var(--border-core-muted);
+      & + span {
+        color: var(--text-body-muted);
+      }
+    }
+
+    //  Disabled + Checked (IMPORTANT)
+    &:checked:disabled {
+      background-color: var(--surface-background-default);
+      border-color: var(--border-core-muted);
+
+      &::after {
+        display: block;
+        background-image: url("/images/check-disabled.svg");
+      }
+    }
+  }
+}