From ea0c4565bf3c17ea54b6e614a3539edbde9f7764 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 21 Feb 2025 21:13:40 +0300
Subject: [PATCH] B: Fix tailwind and other minor bug

---
 .../src/app/Navigation/NavigationButton.tsx   |   3 +-
 .../src/components/Input/SearchBar.tsx        |   3 +-
 .../oss/pages/OssPage/MenuOssTabs.tsx         |   2 +-
 .../rsform/components/PickConstituenta.tsx    |   4 +-
 .../rsform/components/PickSubstitutions.tsx   |  28 +-
 .../rsform/components/WordformButton.tsx      |   2 +-
 .../dialogs/DlgCstTemplate/TabArguments.tsx   |   2 +-
 .../DlgInlineSynthesis/TabSubstitutions.tsx   |   2 +-
 .../ToolbarConstituenta.tsx                   |   2 +-
 .../RSFormPage/EditorRSList/ToolbarRSList.tsx |   2 +-
 .../rsform/pages/RSFormPage/MenuRSTabs.tsx    |   2 +-
 rsconcept/frontend/src/index.css              |   2 -
 rsconcept/frontend/src/styling/setup.css      |  18 +-
 .../frontend/src/styling/setup.utilities.css  | 130 ---------
 rsconcept/frontend/src/styling/styles.css     | 246 ++++++++++++++++--
 .../frontend/src/styling/styles.utilities.css | 232 -----------------
 16 files changed, 262 insertions(+), 418 deletions(-)
 delete mode 100644 rsconcept/frontend/src/styling/setup.utilities.css
 delete mode 100644 rsconcept/frontend/src/styling/styles.utilities.css

diff --git a/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx b/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
index c542686f..9efd416b 100644
--- a/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
+++ b/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
@@ -29,8 +29,9 @@ export function NavigationButton({
       data-tooltip-hidden={hideTitle}
       onClick={onClick}
       className={clsx(
-        'mr-1 h-full', //
+        'mr-1 h-full',
         'flex items-center gap-1',
+        'cursor-pointer',
         'clr-btn-nav cc-animate-color duration-500',
         'rounded-xl',
         'font-controls whitespace-nowrap',
diff --git a/rsconcept/frontend/src/components/Input/SearchBar.tsx b/rsconcept/frontend/src/components/Input/SearchBar.tsx
index 6daa3df8..8c8630ca 100644
--- a/rsconcept/frontend/src/components/Input/SearchBar.tsx
+++ b/rsconcept/frontend/src/components/Input/SearchBar.tsx
@@ -50,7 +50,8 @@ export function SearchBar({
         noOutline
         placeholder={placeholder}
         type='search'
-        className={clsx('outline-hidden bg-transparent', !noIcon && 'pl-10')}
+        colors='bg-transparent'
+        className={clsx(!noIcon && 'pl-10')}
         noBorder={noBorder}
         value={query}
         onChange={event => onChangeQuery?.(event.target.value)}
diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/MenuOssTabs.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/MenuOssTabs.tsx
index 1670f22f..46b195a8 100644
--- a/rsconcept/frontend/src/features/oss/pages/OssPage/MenuOssTabs.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/OssPage/MenuOssTabs.tsx
@@ -71,7 +71,7 @@ export function MenuOssTabs() {
   }
 
   return (
-    <div className='flex'>
+    <div className='flex  border-r-2'>
       <div ref={schemaMenu.ref}>
         <Button
           dense
diff --git a/rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx b/rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx
index 5802089b..fd5e0b5a 100644
--- a/rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx
+++ b/rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx
@@ -73,10 +73,10 @@ export function PickConstituenta({
   ];
 
   return (
-    <div className={clsx('border divide-y', className)} {...restProps}>
+    <div className={clsx('border', className)} {...restProps}>
       <SearchBar
         id={id ? `${id}__search` : undefined}
-        className='clr-input rounded-t-md'
+        className='clr-input border-b rounded-t-md'
         noBorder
         query={filterText}
         onChangeQuery={newValue => setFilterText(newValue)}
diff --git a/rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx b/rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx
index 9770d7d3..08c3e7ce 100644
--- a/rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx
+++ b/rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx
@@ -58,9 +58,19 @@ export function PickSubstitutions({
   const [rightArgument, setRightArgument] = useState<ILibraryItem | null>(
     schemas.length === 1 && allowSelfSubstitution ? schemas[0] : null
   );
+  const leftItems = !leftArgument
+    ? []
+    : (leftArgument as IRSForm).items.filter(
+        cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
+      );
 
   const [leftCst, setLeftCst] = useState<IConstituenta | null>(null);
   const [rightCst, setRightCst] = useState<IConstituenta | null>(null);
+  const rightItems = !rightArgument
+    ? []
+    : (rightArgument as IRSForm).items.filter(
+        cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
+      );
 
   const [deleteRight, setDeleteRight] = useState(true);
   const toggleDelete = () => setDeleteRight(prev => !prev);
@@ -228,14 +238,7 @@ export function PickSubstitutions({
             value={leftArgument}
             onChange={setLeftArgument}
           />
-          <SelectConstituenta
-            noBorder
-            items={(leftArgument as IRSForm)?.items.filter(
-              cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
-            )}
-            value={leftCst}
-            onChange={setLeftCst}
-          />
+          <SelectConstituenta noBorder items={leftItems} value={leftCst} onChange={setLeftCst} />
         </div>
         <div className='flex flex-col gap-1'>
           <MiniButton
@@ -266,14 +269,7 @@ export function PickSubstitutions({
             value={rightArgument}
             onChange={setRightArgument}
           />
-          <SelectConstituenta
-            noBorder
-            items={(rightArgument as IRSForm)?.items.filter(
-              cst => !value.find(item => item.original === cst.id) && (!filterCst || filterCst(cst))
-            )}
-            value={rightCst}
-            onChange={setRightCst}
-          />
+          <SelectConstituenta noBorder items={rightItems} value={rightCst} onChange={setRightCst} />
         </div>
       </div>
 
diff --git a/rsconcept/frontend/src/features/rsform/components/WordformButton.tsx b/rsconcept/frontend/src/features/rsform/components/WordformButton.tsx
index dd383c99..23191cd9 100644
--- a/rsconcept/frontend/src/features/rsform/components/WordformButton.tsx
+++ b/rsconcept/frontend/src/features/rsform/components/WordformButton.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { Grammeme } from '../models/language';
+import { type Grammeme } from '../models/language';
 
 interface WordformButtonProps {
   text: string;
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx
index 98450453..1f45f186 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx
@@ -188,7 +188,7 @@ export function TabArguments() {
         noTooltip
         id='result'
         placeholder='Итоговое определение'
-        className='mt-[1.2rem]'
+        className='mt-[1.1rem]'
         height='5.1rem'
         value={definition}
       />
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/TabSubstitutions.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/TabSubstitutions.tsx
index e3745c9d..17914877 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/TabSubstitutions.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/TabSubstitutions.tsx
@@ -30,7 +30,7 @@ export function TabSubstitutions() {
           allowSelfSubstitution={selfSubstitution}
           rows={10}
           schemas={selfSubstitution ? [source] : [source, receiver]}
-          filterCst={selected.length === 0 ? undefined : cst => selected.includes(cst.id)}
+          filterCst={selected.length === 0 ? undefined : cst => cst.schema !== source.id || selected.includes(cst.id)}
         />
       )}
     />
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx
index d0a701a6..8537c2c8 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx
@@ -80,7 +80,7 @@ export function ToolbarConstituenta({
 
   return (
     <Overlay
-      position='cc-tab-tools right-1/2 translate-x-1/2 xs:right-4 xs:translate-x-0 md:right-1/2 md:translate-x-1/2'
+      position='cc-tab-tools right-1/2 translate-x-0 xs:right-4 xs:-translate-x-1/2 md:right-1/2 md:translate-x-0'
       className='cc-icons cc-animate-position outline-hidden cc-blur px-1 rounded-b-2xl'
     >
       {schema.oss.length > 0 ? (
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/ToolbarRSList.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/ToolbarRSList.tsx
index daa7d2f7..7a229771 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/ToolbarRSList.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/ToolbarRSList.tsx
@@ -49,7 +49,7 @@ export function ToolbarRSList() {
 
   return (
     <Overlay
-      position='cc-tab-tools right-4 translate-x-0 md:right-1/2 md:translate-x-1/2'
+      position='cc-tab-tools right-4 md:right-1/2 -translate-x-1/2 md:translate-x-0'
       className='cc-icons cc-animate-position items-start outline-hidden'
     >
       {schema.oss.length > 0 ? (
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/MenuRSTabs.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/MenuRSTabs.tsx
index ccfefa7a..a5eda8ed 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/MenuRSTabs.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/MenuRSTabs.tsx
@@ -222,7 +222,7 @@ export function MenuRSTabs() {
   }
 
   return (
-    <div className='flex'>
+    <div className='flex border-r-2'>
       <div ref={schemaMenu.ref}>
         <Button
           dense
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index 0571b9c6..d6b8d266 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -1,10 +1,8 @@
 @import 'tailwindcss';
 
 @import './styling/setup.css';
-@import './styling/setup.utilities.css';
 @import './styling/overrides.css';
 @import './styling/styles.css';
-@import './styling/styles.utilities.css';
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
index 631e9734..b77541ed 100644
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -4,21 +4,13 @@
 
 @import './constants.css' layer(base);
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
   *,
   ::after,
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+    border-color: var(--clr-prim-400);
   }
 }
 
@@ -164,3 +156,11 @@
     content: '–\2009';
   }
 }
+
+@utility border {
+  border-radius: 0.25rem;
+}
+
+@utility sticky {
+  z-index: 20;
+}
diff --git a/rsconcept/frontend/src/styling/setup.utilities.css b/rsconcept/frontend/src/styling/setup.utilities.css
deleted file mode 100644
index 2a1dda4b..00000000
--- a/rsconcept/frontend/src/styling/setup.utilities.css
+++ /dev/null
@@ -1,130 +0,0 @@
-@utility border {
-  border-radius: 0.25rem;
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-x {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-y {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-b {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-t {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-l {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-r {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-x-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-y-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-b-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-t-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-l-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility border-r-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility divide-x {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility divide-y {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility divide-x-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility divide-y-2 {
-  border-color: var(--clr-prim-400);
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-color: inherit;
-  }
-}
-
-@utility sticky {
-  z-index: 20;
-}
\ No newline at end of file
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index 13dbe2ec..46dbfd4c 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -1,22 +1,232 @@
-/**
- * Module: Custom styling.
- */
-@import './constants.css' layer(base);
+@utility font-main {
+  font-family: var(--font-main);
+}
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+@utility font-controls {
+  font-family: var(--font-ui);
+  font-weight: 600;
+}
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+@utility font-math {
+  font-family: var(--font-math);
+}
+
+@utility clr-input {
+  background-color: var(--clr-prim-0);
+  &:disabled {
+    background-color: var(--clr-prim-100);
   }
 }
+
+@utility clr-selected {
+  color: var(--clr-prim-999);
+  background-color: var(--clr-sec-200);
+}
+
+@utility clr-btn-default {
+  color: var(--clr-prim-999);
+  background-color: var(--clr-prim-200);
+
+  &:disabled {
+    color: var(--clr-prim-800);
+    background-color: var(--clr-prim-200);
+  }
+
+  &:hover:not(:disabled) {
+    color: var(--clr-prim-999);
+    background-color: var(--clr-sec-100);
+  }
+}
+
+@utility clr-btn-primary {
+  color: var(--clr-prim-999);
+  background-color: var(--clr-sec-200);
+
+  &:disabled {
+    color: var(--clr-prim-800);
+    background-color: var(--clr-prim-200);
+  }
+
+  &:hover:not(:disabled),
+  &:focus-visible {
+    color: var(--clr-sec-0);
+    background-color: var(--clr-sec-600);
+  }
+
+  &:focus-visible,
+  .focus-frame:has(:focus-visible) {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+}
+
+@utility clr-btn-nav {
+  color: var(--clr-prim-800);
+
+  &:hover:not(:disabled) {
+    background-color: var(--clr-sec-100);
+  }
+
+  &:disabled {
+    color: var(--clr-prim-600);
+  }
+}
+
+@utility clr-hover {
+  &:hover:not(:disabled) {
+    color: var(--clr-prim-999);
+    background-color: var(--clr-sec-100);
+  }
+}
+
+@utility clr-outline {
+  :is(&, .focus-frame):focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+}
+
+@utility focus-frame {
+  :is(.clr-outline, &):focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+
+  &:has(:focus-visible) {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+}
+
+@utility clr-text-default {
+  opacity: 1;
+  -webkit-text-fill-color: var(--clr-prim-999);
+  color: var(--clr-prim-999);
+}
+
+@utility clr-text-controls {
+  color: var(--clr-prim-800);
+  background-color: transparent;
+  &:disabled {
+    color: var(--clr-prim-600);
+  }
+}
+
+@utility icon-primary {
+  :not([disabled]) > & {
+    color: var(--clr-sec-800);
+  }
+}
+
+@utility icon-red {
+  :not([disabled]) > & {
+    color: var(--clr-warn-600);
+  }
+}
+
+@utility icon-green {
+  :not([disabled]) > & {
+    color: var(--clr-ok-600);
+  }
+}
+
+@utility inline-icon {
+  display: inline-block;
+  font-size: 1.25rem;
+  margin-left: 0.1rem;
+  margin-right: 0.1rem;
+  transform: translate(0, -0.2rem);
+  color: var(--clr-sec-800);
+}
+
+@utility cc-tab-tools {
+  top: 1.7rem;
+  right: 50%;
+  padding-top: 0.4rem;
+  transform: translate(50%, 0%);
+}
+
+@utility cc-label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  cursor: default;
+  user-select: text;
+  white-space: nowrap;
+}
+
+@utility cc-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@utility cc-icons {
+  display: flex;
+  gap: 0.25rem;
+}
+
+@utility cc-fit-content {
+  field-sizing: content;
+}
+
+@utility cc-scroll-row {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+@utility cc-scroll-y {
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scroll-snap-type: y mandatory;
+}
+
+@utility cc-blur {
+  backdrop-filter: blur(3px);
+}
+
+@utility cc-shadow-border {
+  box-shadow: 0 1px 2px 0 var(--clr-prim-400);
+}
+
+@utility cc-fade-in {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-fade);
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+@utility cc-animate-position {
+  transition-property: transform top left bottom right margin padding;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-move);
+}
+
+@utility cc-animate-modal {
+  clip-path: inset(0% 0% 0% 0%);
+  opacity: 1;
+
+  transition-property: clip-path, opacity;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-modal);
+
+  @starting-style {
+    clip-path: inset(50% 50% 50% 50%);
+    opacity: 0;
+  }
+}
+
+@utility cc-animate-color {
+  transition-property: color, background-color;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+}
\ No newline at end of file
diff --git a/rsconcept/frontend/src/styling/styles.utilities.css b/rsconcept/frontend/src/styling/styles.utilities.css
deleted file mode 100644
index 46dbfd4c..00000000
--- a/rsconcept/frontend/src/styling/styles.utilities.css
+++ /dev/null
@@ -1,232 +0,0 @@
-@utility font-main {
-  font-family: var(--font-main);
-}
-
-@utility font-controls {
-  font-family: var(--font-ui);
-  font-weight: 600;
-}
-
-@utility font-math {
-  font-family: var(--font-math);
-}
-
-@utility clr-input {
-  background-color: var(--clr-prim-0);
-  &:disabled {
-    background-color: var(--clr-prim-100);
-  }
-}
-
-@utility clr-selected {
-  color: var(--clr-prim-999);
-  background-color: var(--clr-sec-200);
-}
-
-@utility clr-btn-default {
-  color: var(--clr-prim-999);
-  background-color: var(--clr-prim-200);
-
-  &:disabled {
-    color: var(--clr-prim-800);
-    background-color: var(--clr-prim-200);
-  }
-
-  &:hover:not(:disabled) {
-    color: var(--clr-prim-999);
-    background-color: var(--clr-sec-100);
-  }
-}
-
-@utility clr-btn-primary {
-  color: var(--clr-prim-999);
-  background-color: var(--clr-sec-200);
-
-  &:disabled {
-    color: var(--clr-prim-800);
-    background-color: var(--clr-prim-200);
-  }
-
-  &:hover:not(:disabled),
-  &:focus-visible {
-    color: var(--clr-sec-0);
-    background-color: var(--clr-sec-600);
-  }
-
-  &:focus-visible,
-  .focus-frame:has(:focus-visible) {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
-  }
-}
-
-@utility clr-btn-nav {
-  color: var(--clr-prim-800);
-
-  &:hover:not(:disabled) {
-    background-color: var(--clr-sec-100);
-  }
-
-  &:disabled {
-    color: var(--clr-prim-600);
-  }
-}
-
-@utility clr-hover {
-  &:hover:not(:disabled) {
-    color: var(--clr-prim-999);
-    background-color: var(--clr-sec-100);
-  }
-}
-
-@utility clr-outline {
-  :is(&, .focus-frame):focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
-  }
-}
-
-@utility focus-frame {
-  :is(.clr-outline, &):focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
-  }
-
-  &:has(:focus-visible) {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: var(--clr-sec-600);
-  }
-}
-
-@utility clr-text-default {
-  opacity: 1;
-  -webkit-text-fill-color: var(--clr-prim-999);
-  color: var(--clr-prim-999);
-}
-
-@utility clr-text-controls {
-  color: var(--clr-prim-800);
-  background-color: transparent;
-  &:disabled {
-    color: var(--clr-prim-600);
-  }
-}
-
-@utility icon-primary {
-  :not([disabled]) > & {
-    color: var(--clr-sec-800);
-  }
-}
-
-@utility icon-red {
-  :not([disabled]) > & {
-    color: var(--clr-warn-600);
-  }
-}
-
-@utility icon-green {
-  :not([disabled]) > & {
-    color: var(--clr-ok-600);
-  }
-}
-
-@utility inline-icon {
-  display: inline-block;
-  font-size: 1.25rem;
-  margin-left: 0.1rem;
-  margin-right: 0.1rem;
-  transform: translate(0, -0.2rem);
-  color: var(--clr-sec-800);
-}
-
-@utility cc-tab-tools {
-  top: 1.7rem;
-  right: 50%;
-  padding-top: 0.4rem;
-  transform: translate(50%, 0%);
-}
-
-@utility cc-label {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  cursor: default;
-  user-select: text;
-  white-space: nowrap;
-}
-
-@utility cc-column {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-@utility cc-icons {
-  display: flex;
-  gap: 0.25rem;
-}
-
-@utility cc-fit-content {
-  field-sizing: content;
-}
-
-@utility cc-scroll-row {
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-}
-
-@utility cc-scroll-y {
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  scroll-snap-type: y mandatory;
-}
-
-@utility cc-blur {
-  backdrop-filter: blur(3px);
-}
-
-@utility cc-shadow-border {
-  box-shadow: 0 1px 2px 0 var(--clr-prim-400);
-}
-
-@utility cc-fade-in {
-  opacity: 1;
-
-  transition-property: opacity;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-fade);
-
-  @starting-style {
-    opacity: 0;
-  }
-}
-
-@utility cc-animate-position {
-  transition-property: transform top left bottom right margin padding;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-move);
-}
-
-@utility cc-animate-modal {
-  clip-path: inset(0% 0% 0% 0%);
-  opacity: 1;
-
-  transition-property: clip-path, opacity;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-modal);
-
-  @starting-style {
-    clip-path: inset(50% 50% 50% 50%);
-    opacity: 0;
-  }
-}
-
-@utility cc-animate-color {
-  transition-property: color, background-color;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-select);
-}
\ No newline at end of file