@edvak99/voice-receptionist-widget 1.1.26 → 1.1.29

package/src/assets/css/shoelace-edit.scss

@@ -1,513 +1,513 @@
-
-:root {
-  --sl-font-sans: var(--font-family-sans);
-  --sl-font-mono: 'Courier New', monospace;
-  --sl-font-size-medium: var(--font-size-base);
-  
-  // --sl-font-size-medium::13px !important
-
-}
-// DETAILS COMPONENT
-sl-details::part(summary) {
-  @apply font-semibold text-dark;    
-}
-
-.details-group sl-details {
-  margin-bottom: var(--sl-spacing-2x-small);
-}
-.payment-group sl-details::part(header) {
-  @apply bg-light h-7 px-base
-
-}
-
-
-sl-tooltip::part(base), sl-tooltip::part(base__popup),  sl-tooltip::part(body) {
-  background-color: #172B4D;
-  font-size: 12px;
-  border-radius: 4px;
-  max-width: 320px !important;
-  white-space: normal !important;
-}
-
-
-
-// RADIO BUTTON
-sl-radio-group::part(button-group) {
-  display: flex;
-  align-items: center;
-}
-sl-radio-group::part(base) {
-  display: flex;
-  align-items: center;
-}
-
-
-sl-icon[library="material"], sl-icon-button[library="material"] {
-  font-size: 24px;
-  line-height: 32px;
-}
-sl-icon[library="material"][size="2xs"], sl-icon-button[library="material"][size="2xs"] {
-  font-size: 14px;
-  line-height: 24px;
-}
-sl-icon[library="material"][size="xs"], sl-icon-button[library="material"][size="xs"] {
-  font-size: 16px;
-  line-height: 24px;
-}
-sl-icon[library="material"][size="sm"], sl-icon-button[library="material"][size="sm"] {
-  font-size: 20px;
-  line-height: 30px;
-}
-sl-icon[library="material"][size="md"], sl-icon-button[library="material"][size="md"] {
-  font-size: 28px;
-  line-height: 32px;
-}
-sl-icon[library="material"][size="lg"], sl-icon-button[library="material"][size="lg"] {
-  font-size: 32px;
-  line-height: 48px;
-}
-
-
-// PADDING FOR SL-ICON-BUTTON WITH MATERIAL ICON LIBRARY
-sl-icon-button[library="material"]::part(base) {
-  padding: 4px;
-}
-sl-icon-button[library="material"]::part(base) {
-  padding: 4px;
-}
-sl-icon-button[library="material"][size="sm"]::part(base) {
-  padding: 3px;
-}
-sl-icon-button[library="material"][size="xs"]::part(base) {
-  padding: 2px;
-}
-
-
-
-// PRIMARY BUTTON BACKGROUNG COLOR 600 TO 700
-sl-button[variant="primary"]:not([outline])::part(base) {
-  @apply bg-primary border-primary;
-  color: var(--sl-color-neutral-0);
-}
-
-// PRIMARY BUTTON HOVER BACKGROUNG COLOR 500 TO 600
-sl-button[variant="primary"]:not([outline])::part(base):hover {
-  @apply bg-primary-400 border-primary-400;
-  color: var(--sl-color-neutral-0);
-}
-
-
-
-
-
-
-
-// VARIATIONS FOR SL-ICON-BUTTON
-sl-icon-button[variant="delete"]::part(base) {
-  @apply bg-light transition-colors text-light hover:text-red-400;
-}
-
-sl-icon-button[variant="secondary"]::part(base) {
-  @apply bg-primary-100 border-primary-300 rounded transition-colors duration-300 text-primary;
-  
-  // TAILWIND CLASSES ARE NOT APLLIED FOR UNKNOW REASON
-  border-width: 1px;
-  border-style: solid;
-
-}
-sl-icon-button[variant="secondary"]::part(base):hover {
-  @apply bg-primary border-primary text-white;
-  
-  // TAILWIND CLASSES ARE NOT APLLIED FOR UNKNOW REASON
-  border-width: 1px;
-  border-style: solid;
-}
-
-// THIS CLASS IS USED FOR ICON BUTTONS WITH HOVER BACKGROUND
-sl-icon-button[variant="background"]::part(base){
-  @apply bg-lighter rounded border-transparent text-light transition-colors;
-  border-width: 1px;
-  border-style: solid;
-}
-
-sl-icon-button[variant="background"]::part(base):hover {
-  @apply bg-primary-50 border-primary-300 text-primary;
-
-  // TAILWIND CLASSES ARE NOT APLLIED FOR UNKNOW REASON
-  border-width: 1px;
-  border-style: solid;
-}
-
-sl-icon-button[variant="background"]::part(base):active {
-  
-}
-// ICON BUTTON
-sl-icon-button[size="small"][variant="default"]::part(base) {
-  padding: 0 8px;
-  height: 30px;
-}
-sl-icon-button[variant="default"]::part(base) {
-  border: 1px solid #d1d5db; // Gray-300
-
-  &:hover {
-    background-color: #f1f5f9; // slate-100
-  }
-}
-sl-icon-button[border]::part(base) {
-  border: 1px solid #d1d5db; // Gray-300
-
-  &:hover {
-    background-color: #f1f5f9; // slate-100
-  }
-}
-
-
-// ⁡⁣⁣⁢SHOELACE BUTTON SIZES⁡
-sl-button[variant="text"]::part(base) {
-  font-weight: 500 !important;
-}
-sl-button[size="base"]::part(base) {
-  height: var(--height-default);
-  line-height: var(--height-default);
-  padding: 0 16px;
-  border-radius: 4px;
-}
-
-sl-button[size="small2"]::part(base) {
-  height: 36px;
-  line-height: 36px;
-  padding: 0 16px;
-  border-radius: 4px;
-}
-
-sl-button[size="xs"]::part(base) {
-  height: var(--height-xs);
-  line-height: 26px;
-  padding: 0 8px;
-  border-radius: 4px;
-  font-size: 12px;
-}
-sl-button[size="2xs"]::part(base) {
-  height: calc(var(--height-2xs) - 2px);
-  line-height: 22px;
-  padding: 0 8px;
-  border-radius: 4px;
-  font-size: 10px;
-}
-
-
-
-// ⁡⁣⁣⁢SHOELACE BUTTON COLOR VARINATS⁡
-sl-button[variant="secondary"]::part(base) {
-  background-color: #F0FAFF;
-  border-color: #8FD8FF;
-  color: #005CF3;
-}
-
-sl-button[variant="secondary"]::part(base):hover {
-  background-color: hsl(200, 100%, 94%);
-}
-
-sl-button[variant="secondary"]::part(base):active {
-  background-color: hsl(200, 100%, 92%);
-}
-
-
-
-
-sl-button[variant="tetriary"]::part(base) {
-  @apply bg-slate-100 text-body border-transparent;
-}
-
-sl-button[variant="tetriary"]::part(base):hover {
-  @apply bg-slate-200 text-body border-transparent;
-}
-
-sl-button[variant="tetriary"]::part(base):active {
-  @apply bg-slate-100 text-body border-transparent;
-}
-
-
-sl-button[variant="transparent"]::part(base) {
-  @apply bg-white text-body border-transparent;
-}
-
-sl-button[variant="transparent"]::part(base):hover {
-  @apply bg-white text-primary border-transparent;
-}
-
-sl-button[variant="transparent"]::part(base):active {
-  @apply bg-white text-primary border-transparent;
-}
-
-
-
-
-
-sl-button[variant="Generateai"]::part(base) {
-@apply text-primary bg-white;
-border-radius: 4px;
-  border: 2px solid #0000;
-  background: linear-gradient(#ffffff, #ffffff) padding-box, 
-  linear-gradient(240deg,#FF4F1C,#0062F5) border-box;
-  // animation: 4s rotate linear infinite;
-
-
-}
-
-sl-button[variant="Generateai"]::part(base):hover {
-  background-color: hsl(200, 100%, 94%);
-}
-
-sl-button[variant="Generateai"]::part(base):active {
-  background-color: hsl(200, 100%, 92%);
-}
-
-
-sl-button[variant="Generateai_new"]::part(base) {
-@apply text-primary bg-white;
-border-radius: 4px;
-  border: 2px solid #0000;
-  background: linear-gradient(#ffffff, #ffffff) padding-box, 
-  linear-gradient(240deg,#F57722,#7D34FB) border-box;
-  // animation: 4s rotate linear infinite;
-
-
-}
-
-sl-button[variant="Generateai_new"]::part(base):hover {
-  background-color: hsl(200, 100%, 94%);
-}
-
-sl-button[variant="Generateai_new"]::part(base):active {
-  background-color: hsl(200, 100%, 92%);
-}
-
-
-// sl-button[variant="ai"] {
-//   background-color: #FFFFFF;
-//   border-color: var(--sl-color-primary-600);
-//   color: var(--sl-color-primary-700);
-// }
-
-// button[icon][variant="ai"] {
-//   @apply border  border-primary text-primary;
-//       background: linear-gradient(90deg, #0062f5 0%, #FF4F1C 100%);
-//       box-sizing: border-box;
-//       color: #0062f5;
-// }
-
-
-
-
-
-
-
-//   sl-tree
-.tree-with-lines {
-  --indent-guide-width: 1px;
-}
-
-
-sl-details::part(header) {
-  padding: 6px;
-}
-sl-details[size="sm"]::part(summary) {
-  font-weight: 500;
-  font-size: 12px;
-}
-
-
-sl-menu-item::part(label) {
-  font-size: var(--font-size-base);
-  font-weight: 400;
-}
-
-sl-dropdown::part(base) {
-  @apply border;
-}
-
-sl-details::part(base) {
-  @apply bg-white mb-sm p-0 hover:shadow;
-}
-
-sl-details[open]::part(header) {
-  @apply bg-lighter rounded-b-none shadow;
-}
-
-sl-checkbox {
-  display: inline-flex;
-  align-items: center;
-  font-size: 13px;
-}
-sl-checkbox::part(control) {
-  border-radius: 4px;
-}
-sl-tab-group::part(base) {
-  height: 100%;
-}
-
-sl-tab-panel, sl-tab-panel::part(base), .tab-panel {
-  height: 100%;
-}
-sl-tab-group .tab-group__body {
-  flex: 1 !important;
-}
-
-sl-menu-item::part(label), sl-menu-item::part(label).menu-item__label {
-  display: flex !important;
-  align-items: center !important;
-}
-sl-menu-item::part(checked-icon) 
-{
-  width: 12px;
-}
-
-  sl-menu-item::part(base) 
-  { 
-    border-left-style: solid;
-    border-left-width: 3px;
-    border-left-color: transparent;
-    &:hover
-    {
-      background-color: rgb(241 245 249);
-      border-left-color: var(--sl-color-primary-500);
-      border-left-style: solid;
-      border-left-width: 3px;
-    }
-  }
-
-
-  sl-menu-item:focus::part(base) {
-    border-left-style: solid;
-    border-left-width: var(--option-active-border-width);
-    border-left-color: var(--sl-color-primary-500);
-    background-color: rgb(241 245 249);
-    color: var(--sl-color-neutral-900); 
-        &:hover
-    {
-      background-color: rgb(241 245 249);
-      border-left-color: var(--sl-color-primary-500);
-    }
-  }
-
-  sl-menu-item[aria-disabled="true"]:focus::part(base) {
-    border-left-color: #7fb0fa;
-    background-color: #f8fafc;
-    color: #ababaf;
-        &:hover
-    {
-        border-left-color: #7fb0fa;
-        background-color: #f8fafc;
-        color: #ababaf;
-    }
-}
-
-
-
-sl-tab-group::part(body) {
-  height: 100%;
-}
-
-sl-button[variant="transparent"]::part(base) {
-  @apply bg-white text-body border-transparent;
-}
-
-sl-button[variant="transparent"]::part(base):hover {
-  @apply bg-white text-primary border-transparent;
-} 
-
-sl-button[variant="transparent"]::part(base):active {
-  @apply bg-white text-primary border-transparent;
-}
-
-
-sl-popup::part(popup) {
-  min-width: min-content !important;
-  z-index: 990;
-}
-
-
-sl-button[variant="schedule"]::part(base) {
-  background-color: transparent;
-  border-color: transparent;
-  color: #404E5B;
-}
-
-
-sl-button[size="schedulesize"]::part(base) {
-  height: 36px;
-  line-height: 36px;
-  padding: 0 16px;
-  border-radius: 4px;
-  font-size: 14px !important;
-}
-
-sl-button[variant="schedule"]::part(base):hover {
-  border:#D4D4D8 solid 1px !important;
-}
-
-sl-button[variant="schedule"]::part(base):active {
-  background-color: #f2f5f7 !important;
-}
-
-
-sl-tooltip::part(body) {
-  background-color: #44546f;
-  color: #fff;
-}
-
-sl-button.text-btn::part(base) {
-  height: 18px;
-  line-height: 18px;
-  margin-top: -2px;
-}
-sl-button.text-btn::part(label) {
-  padding: 0;
-}
-
-sl-icon-button[variant="visit"]::part(base) {
-  @apply border border-solid border-transparent transition-colors duration-300 p-1.5 text-base;
-}
-sl-icon-button[variant="visit"]::part(base):hover {
-  @apply bg-white border border-solid border-slate-200 rounded;
-}
-sl-dropdown[open] sl-icon-button.active[variant="visit"]::part(base),
-sl-popup[active] sl-icon-button.active[variant="visit"]::part(base) {
-  @apply border border-solid border-primary-200 rounded;
-}
-
-sl-icon-button[variant="visit"][size="md"]::part(base) {
-  font-size: 18px;
-}
-sl-icon-button[variant="visit"][size="lg"]::part(base) {
-  font-size: 20px;
-}
-sl-icon-button[variant="visit"][size="2xl"]::part(base) {
-font-size: 24px;
-}
-
-sl-radio-button::part(button) {
-  @apply transition-all duration-300;
-}
-sl-radio-button::part(button):hover {
-  opacity: 0.7;
-}
-sl-radio-button::part(button--checked):hover {
-  opacity: 1;
-}
-
-sl-icon-button.icon-button::part(base):hover {
-  color: inherit;
-}
-.badge--primary {
-  @apply bg-primary;
-}
-span.tag.tag--primary.tag--small
-{
-  color: var(--color-primary) !important;
-}
-
-// sl-icon-button::part(base) {
-//   tabindex: -1; /* ❌ invalid */
+
+:root {
+  --sl-font-sans: var(--font-family-sans);
+  --sl-font-mono: 'Courier New', monospace;
+  --sl-font-size-medium: var(--font-size-base);
+  
+  // --sl-font-size-medium::13px !important
+
+}
+// DETAILS COMPONENT
+sl-details::part(summary) {
+  @apply font-semibold text-dark;    
+}
+
+.details-group sl-details {
+  margin-bottom: var(--sl-spacing-2x-small);
+}
+.payment-group sl-details::part(header) {
+  @apply bg-light h-7 px-base
+
+}
+
+
+sl-tooltip::part(base), sl-tooltip::part(base__popup),  sl-tooltip::part(body) {
+  background-color: #172B4D;
+  font-size: 12px;
+  border-radius: 4px;
+  max-width: 320px !important;
+  white-space: normal !important;
+}
+
+
+
+// RADIO BUTTON
+sl-radio-group::part(button-group) {
+  display: flex;
+  align-items: center;
+}
+sl-radio-group::part(base) {
+  display: flex;
+  align-items: center;
+}
+
+
+sl-icon[library="material"], sl-icon-button[library="material"] {
+  font-size: 24px;
+  line-height: 32px;
+}
+sl-icon[library="material"][size="2xs"], sl-icon-button[library="material"][size="2xs"] {
+  font-size: 14px;
+  line-height: 24px;
+}
+sl-icon[library="material"][size="xs"], sl-icon-button[library="material"][size="xs"] {
+  font-size: 16px;
+  line-height: 24px;
+}
+sl-icon[library="material"][size="sm"], sl-icon-button[library="material"][size="sm"] {
+  font-size: 20px;
+  line-height: 30px;
+}
+sl-icon[library="material"][size="md"], sl-icon-button[library="material"][size="md"] {
+  font-size: 28px;
+  line-height: 32px;
+}
+sl-icon[library="material"][size="lg"], sl-icon-button[library="material"][size="lg"] {
+  font-size: 32px;
+  line-height: 48px;
+}
+
+
+// PADDING FOR SL-ICON-BUTTON WITH MATERIAL ICON LIBRARY
+sl-icon-button[library="material"]::part(base) {
+  padding: 4px;
+}
+sl-icon-button[library="material"]::part(base) {
+  padding: 4px;
+}
+sl-icon-button[library="material"][size="sm"]::part(base) {
+  padding: 3px;
+}
+sl-icon-button[library="material"][size="xs"]::part(base) {
+  padding: 2px;
+}
+
+
+
+// PRIMARY BUTTON BACKGROUNG COLOR 600 TO 700
+sl-button[variant="primary"]:not([outline])::part(base) {
+  @apply bg-primary border-primary;
+  color: var(--sl-color-neutral-0);
+}
+
+// PRIMARY BUTTON HOVER BACKGROUNG COLOR 500 TO 600
+sl-button[variant="primary"]:not([outline])::part(base):hover {
+  @apply bg-primary-400 border-primary-400;
+  color: var(--sl-color-neutral-0);
+}
+
+
+
+
+
+
+
+// VARIATIONS FOR SL-ICON-BUTTON
+sl-icon-button[variant="delete"]::part(base) {
+  @apply bg-light transition-colors text-light hover:text-red-400;
+}
+
+sl-icon-button[variant="secondary"]::part(base) {
+  @apply bg-primary-100 border-primary-300 rounded transition-colors duration-300 text-primary;
+  
+  // TAILWIND CLASSES ARE NOT APLLIED FOR UNKNOW REASON
+  border-width: 1px;
+  border-style: solid;
+
+}
+sl-icon-button[variant="secondary"]::part(base):hover {
+  @apply bg-primary border-primary text-white;
+  
+  // TAILWIND CLASSES ARE NOT APLLIED FOR UNKNOW REASON
+  border-width: 1px;
+  border-style: solid;
+}
+
+// THIS CLASS IS USED FOR ICON BUTTONS WITH HOVER BACKGROUND
+sl-icon-button[variant="background"]::part(base){
+  @apply bg-lighter rounded border-transparent text-light transition-colors;
+  border-width: 1px;
+  border-style: solid;
+}
+
+sl-icon-button[variant="background"]::part(base):hover {
+  @apply bg-primary-50 border-primary-300 text-primary;
+
+  // TAILWIND CLASSES ARE NOT APLLIED FOR UNKNOW REASON
+  border-width: 1px;
+  border-style: solid;
+}
+
+sl-icon-button[variant="background"]::part(base):active {
+  
+}
+// ICON BUTTON
+sl-icon-button[size="small"][variant="default"]::part(base) {
+  padding: 0 8px;
+  height: 30px;
+}
+sl-icon-button[variant="default"]::part(base) {
+  border: 1px solid #d1d5db; // Gray-300
+
+  &:hover {
+    background-color: #f1f5f9; // slate-100
+  }
+}
+sl-icon-button[border]::part(base) {
+  border: 1px solid #d1d5db; // Gray-300
+
+  &:hover {
+    background-color: #f1f5f9; // slate-100
+  }
+}
+
+
+// ⁡⁣⁣⁢SHOELACE BUTTON SIZES⁡
+sl-button[variant="text"]::part(base) {
+  font-weight: 500 !important;
+}
+sl-button[size="base"]::part(base) {
+  height: var(--height-default);
+  line-height: var(--height-default);
+  padding: 0 16px;
+  border-radius: 4px;
+}
+
+sl-button[size="small2"]::part(base) {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 16px;
+  border-radius: 4px;
+}
+
+sl-button[size="xs"]::part(base) {
+  height: var(--height-xs);
+  line-height: 26px;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+sl-button[size="2xs"]::part(base) {
+  height: calc(var(--height-2xs) - 2px);
+  line-height: 22px;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: 10px;
+}
+
+
+
+// ⁡⁣⁣⁢SHOELACE BUTTON COLOR VARINATS⁡
+sl-button[variant="secondary"]::part(base) {
+  background-color: #F0FAFF;
+  border-color: #8FD8FF;
+  color: #005CF3;
+}
+
+sl-button[variant="secondary"]::part(base):hover {
+  background-color: hsl(200, 100%, 94%);
+}
+
+sl-button[variant="secondary"]::part(base):active {
+  background-color: hsl(200, 100%, 92%);
+}
+
+
+
+
+sl-button[variant="tetriary"]::part(base) {
+  @apply bg-slate-100 text-body border-transparent;
+}
+
+sl-button[variant="tetriary"]::part(base):hover {
+  @apply bg-slate-200 text-body border-transparent;
+}
+
+sl-button[variant="tetriary"]::part(base):active {
+  @apply bg-slate-100 text-body border-transparent;
+}
+
+
+sl-button[variant="transparent"]::part(base) {
+  @apply bg-white text-body border-transparent;
+}
+
+sl-button[variant="transparent"]::part(base):hover {
+  @apply bg-white text-primary border-transparent;
+}
+
+sl-button[variant="transparent"]::part(base):active {
+  @apply bg-white text-primary border-transparent;
+}
+
+
+
+
+
+sl-button[variant="Generateai"]::part(base) {
+@apply text-primary bg-white;
+border-radius: 4px;
+  border: 2px solid #0000;
+  background: linear-gradient(#ffffff, #ffffff) padding-box, 
+  linear-gradient(240deg,#FF4F1C,#0062F5) border-box;
+  // animation: 4s rotate linear infinite;
+
+
+}
+
+sl-button[variant="Generateai"]::part(base):hover {
+  background-color: hsl(200, 100%, 94%);
+}
+
+sl-button[variant="Generateai"]::part(base):active {
+  background-color: hsl(200, 100%, 92%);
+}
+
+
+sl-button[variant="Generateai_new"]::part(base) {
+@apply text-primary bg-white;
+border-radius: 4px;
+  border: 2px solid #0000;
+  background: linear-gradient(#ffffff, #ffffff) padding-box, 
+  linear-gradient(240deg,#F57722,#7D34FB) border-box;
+  // animation: 4s rotate linear infinite;
+
+
+}
+
+sl-button[variant="Generateai_new"]::part(base):hover {
+  background-color: hsl(200, 100%, 94%);
+}
+
+sl-button[variant="Generateai_new"]::part(base):active {
+  background-color: hsl(200, 100%, 92%);
+}
+
+
+// sl-button[variant="ai"] {
+//   background-color: #FFFFFF;
+//   border-color: var(--sl-color-primary-600);
+//   color: var(--sl-color-primary-700);
+// }
+
+// button[icon][variant="ai"] {
+//   @apply border  border-primary text-primary;
+//       background: linear-gradient(90deg, #0062f5 0%, #FF4F1C 100%);
+//       box-sizing: border-box;
+//       color: #0062f5;
+// }
+
+
+
+
+
+
+
+//   sl-tree
+.tree-with-lines {
+  --indent-guide-width: 1px;
+}
+
+
+sl-details::part(header) {
+  padding: 6px;
+}
+sl-details[size="sm"]::part(summary) {
+  font-weight: 500;
+  font-size: 12px;
+}
+
+
+sl-menu-item::part(label) {
+  font-size: var(--font-size-base);
+  font-weight: 400;
+}
+
+sl-dropdown::part(base) {
+  @apply border;
+}
+
+sl-details::part(base) {
+  @apply bg-white mb-sm p-0 hover:shadow;
+}
+
+sl-details[open]::part(header) {
+  @apply bg-lighter rounded-b-none shadow;
+}
+
+sl-checkbox {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+}
+sl-checkbox::part(control) {
+  border-radius: 4px;
+}
+sl-tab-group::part(base) {
+  height: 100%;
+}
+
+sl-tab-panel, sl-tab-panel::part(base), .tab-panel {
+  height: 100%;
+}
+sl-tab-group .tab-group__body {
+  flex: 1 !important;
+}
+
+sl-menu-item::part(label), sl-menu-item::part(label).menu-item__label {
+  display: flex !important;
+  align-items: center !important;
+}
+sl-menu-item::part(checked-icon) 
+{
+  width: 12px;
+}
+
+  sl-menu-item::part(base) 
+  { 
+    border-left-style: solid;
+    border-left-width: 3px;
+    border-left-color: transparent;
+    &:hover
+    {
+      background-color: rgb(241 245 249);
+      border-left-color: var(--sl-color-primary-500);
+      border-left-style: solid;
+      border-left-width: 3px;
+    }
+  }
+
+
+  sl-menu-item:focus::part(base) {
+    border-left-style: solid;
+    border-left-width: var(--option-active-border-width);
+    border-left-color: var(--sl-color-primary-500);
+    background-color: rgb(241 245 249);
+    color: var(--sl-color-neutral-900); 
+        &:hover
+    {
+      background-color: rgb(241 245 249);
+      border-left-color: var(--sl-color-primary-500);
+    }
+  }
+
+  sl-menu-item[aria-disabled="true"]:focus::part(base) {
+    border-left-color: #7fb0fa;
+    background-color: #f8fafc;
+    color: #ababaf;
+        &:hover
+    {
+        border-left-color: #7fb0fa;
+        background-color: #f8fafc;
+        color: #ababaf;
+    }
+}
+
+
+
+sl-tab-group::part(body) {
+  height: 100%;
+}
+
+sl-button[variant="transparent"]::part(base) {
+  @apply bg-white text-body border-transparent;
+}
+
+sl-button[variant="transparent"]::part(base):hover {
+  @apply bg-white text-primary border-transparent;
+} 
+
+sl-button[variant="transparent"]::part(base):active {
+  @apply bg-white text-primary border-transparent;
+}
+
+
+sl-popup::part(popup) {
+  min-width: min-content !important;
+  z-index: 990;
+}
+
+
+sl-button[variant="schedule"]::part(base) {
+  background-color: transparent;
+  border-color: transparent;
+  color: #404E5B;
+}
+
+
+sl-button[size="schedulesize"]::part(base) {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 16px;
+  border-radius: 4px;
+  font-size: 14px !important;
+}
+
+sl-button[variant="schedule"]::part(base):hover {
+  border:#D4D4D8 solid 1px !important;
+}
+
+sl-button[variant="schedule"]::part(base):active {
+  background-color: #f2f5f7 !important;
+}
+
+
+sl-tooltip::part(body) {
+  background-color: #44546f;
+  color: #fff;
+}
+
+sl-button.text-btn::part(base) {
+  height: 18px;
+  line-height: 18px;
+  margin-top: -2px;
+}
+sl-button.text-btn::part(label) {
+  padding: 0;
+}
+
+sl-icon-button[variant="visit"]::part(base) {
+  @apply border border-solid border-transparent transition-colors duration-300 p-1.5 text-base;
+}
+sl-icon-button[variant="visit"]::part(base):hover {
+  @apply bg-white border border-solid border-slate-200 rounded;
+}
+sl-dropdown[open] sl-icon-button.active[variant="visit"]::part(base),
+sl-popup[active] sl-icon-button.active[variant="visit"]::part(base) {
+  @apply border border-solid border-primary-200 rounded;
+}
+
+sl-icon-button[variant="visit"][size="md"]::part(base) {
+  font-size: 18px;
+}
+sl-icon-button[variant="visit"][size="lg"]::part(base) {
+  font-size: 20px;
+}
+sl-icon-button[variant="visit"][size="2xl"]::part(base) {
+font-size: 24px;
+}
+
+sl-radio-button::part(button) {
+  @apply transition-all duration-300;
+}
+sl-radio-button::part(button):hover {
+  opacity: 0.7;
+}
+sl-radio-button::part(button--checked):hover {
+  opacity: 1;
+}
+
+sl-icon-button.icon-button::part(base):hover {
+  color: inherit;
+}
+.badge--primary {
+  @apply bg-primary;
+}
+span.tag.tag--primary.tag--small
+{
+  color: var(--color-primary) !important;
+}
+
+// sl-icon-button::part(base) {
+//   tabindex: -1; /* ❌ invalid */
 // }