@clusterenvision/ui-scss 1.94.3

package/dist/components/form-controls/textarea.css

@@ -0,0 +1,28 @@
+.textarea {
+  display: var(--ce-textarea-display, block);
+  width: var(--ce-textarea-width, 100%);
+  padding: var(--ce-textarea-padding, 0.5rem 1rem);
+  font-size: var(--ce-textarea-size, 1rem);
+  color: var(--ce-textarea-color, #202124);
+  background-color: var(--ce-textarea-bg, #ffffff);
+  border: var(--ce-textarea-border, 1px solid #9aa0a6);
+  border-radius: var(--ce-textarea-radius, 4px);
+  resize: var(--ce-textarea-resize, vertical);
+  min-height: var(--ce-textarea-min-height, 100px);
+}
+.textarea:focus {
+  border-color: var(--ce-textarea-focus-border, #1a73e8);
+  outline: var(--ce-textarea-focus-outline, none);
+  box-shadow: var(--ce-textarea-focus-shadow, 0 0 0 3px rgba(26, 115, 232, 0.2));
+}
+.textarea:disabled {
+  background-color: var(--ce-textarea-disabled-bg, #f8f9fa);
+  color: var(--ce-textarea-disabled-color, #9aa0a6);
+  cursor: var(--ce-textarea-disabled-cursor, not-allowed);
+}
+.textarea--error {
+  border-color: var(--ce-textarea-error-border, #ea4335);
+}
+.textarea--error:focus {
+  box-shadow: var(--ce-textarea-error-shadow, 0 0 0 3px rgba(234, 67, 53, 0.2));
+}

package/dist/components/form-controls/toggle.css

@@ -0,0 +1,38 @@
+.toggle {
+  position: relative;
+  width: 2.5rem;
+  height: 1.4rem;
+}
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle .slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #9aa0a6;
+  border-radius: 10px;
+  transition: 0.4s;
+  cursor: pointer;
+}
+.toggle .slider::before {
+  content: "";
+  position: absolute;
+  height: 1rem;
+  width: 1rem;
+  left: 4px;
+  bottom: 4px;
+  background-color: #ffffff;
+  transition: 0.4s;
+  border-radius: var(--ce-toggle-thumb-radius, var(--ce-radius-circle, 50%));
+}
+.toggle input:checked + .slider {
+  background-color: #1a73e8;
+}
+.toggle input:checked + .slider::before {
+  transform: translateX(1.1rem);
+}

package/dist/components/navigation/breadcrumbs.css

@@ -0,0 +1,33 @@
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: var(--ce-breadcrumbs-gap, var(--ce-spacing-sm, 0.5rem));
+  font-size: 0.95rem;
+  color: var(--theme-breadcrumbs-fg, #9aa0a6);
+  padding: 0.25rem 0;
+  list-style: none;
+}
+.breadcrumbs__item {
+  display: flex;
+  align-items: center;
+  color: var(--theme-breadcrumbs-item, #202124);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.breadcrumbs__item:hover, .breadcrumbs__item:focus-visible {
+  color: var(--theme-breadcrumbs-hover, #1a73e8);
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.breadcrumbs__item.active {
+  color: var(--theme-breadcrumbs-active, #1a73e8);
+  font-weight: 600;
+  cursor: default;
+}
+.breadcrumbs__separator {
+  color: var(--theme-breadcrumbs-separator, #9aa0a6);
+  margin: var(--ce-breadcrumbs-separator-margin, 0 0.25rem);
+  -webkit-user-select: none;
+  user-select: none;
+}

package/dist/components/navigation/menu.css

@@ -0,0 +1,43 @@
+.menu {
+  display: var(--ce-menu-display, flex);
+  flex-direction: var(--ce-menu-direction, column);
+  min-width: var(--ce-menu-min-width, 180px);
+  background-color: var(--ce-menu-bg, var(--theme-menu-bg, #ffffff));
+  color: var(--ce-menu-color, var(--theme-menu-fg, #202124));
+  border-radius: var(--ce-menu-radius, 8px);
+  box-shadow: var(--ce-menu-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
+  border-width: var(--ce-menu-border-width, 1px);
+  border-style: var(--ce-menu-border-style, solid);
+  border-color: var(--ce-menu-border, var(--theme-menu-border, #9aa0a6));
+  padding: var(--ce-menu-padding, 0.25rem 0);
+  font-size: var(--ce-menu-size, 1rem);
+  z-index: var(--ce-menu-z, );
+}
+.menu__item {
+  display: var(--ce-menu-item-display, flex);
+  align-items: var(--ce-menu-item-align, center);
+  padding: var(--ce-menu-item-padding, 0.25rem 1rem);
+  cursor: var(--ce-menu-item-cursor, pointer);
+  color: var(--ce-menu-item-color, var(--theme-menu-item-fg, #202124));
+  background: var(--ce-menu-item-bg, none);
+  border: var(--ce-menu-item-border, none);
+  font-size: var(--ce-menu-item-size, inherit);
+  transition: var(--ce-menu-item-transition, background-color 0.2s, color 0.2s);
+  outline: var(--ce-menu-item-outline, none);
+}
+.menu__item:hover, .menu__item:focus-visible {
+  background-color: var(--ce-menu-item-hover-bg, var(--theme-menu-item-hover, #1a73e8));
+  color: var(--ce-menu-item-hover-color, var(--theme-menu-item-hover-fg, #ffffff));
+  outline: var(--ce-menu-item-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-menu-item-focus-offset, 2px);
+}
+.menu__item.active {
+  background-color: var(--ce-menu-item-active-bg, var(--theme-menu-item-active, #1a73e8));
+  color: var(--ce-menu-item-active-color, var(--theme-menu-item-active-fg, #ffffff));
+}
+.menu__divider {
+  height: var(--ce-menu-divider-height, 1px);
+  background-color: var(--ce-menu-divider-bg, var(--theme-menu-divider, #9aa0a6));
+  margin: var(--ce-menu-divider-margin, 0.25rem 0);
+  border: var(--ce-menu-divider-border, none);
+}

package/dist/components/navigation/navbar.css

@@ -0,0 +1,64 @@
+.navbar {
+  display: var(--ce-navbar-display, flex);
+  align-items: var(--ce-navbar-align, center);
+  justify-content: var(--ce-navbar-justify, space-between);
+  padding: var(--ce-navbar-padding, 1rem 2rem);
+  background-color: var(--ce-navbar-bg, #1a73e8);
+  color: var(--ce-navbar-color, #ffffff);
+  z-index: var(--ce-navbar-z, 1020);
+}
+.navbar .navbar__brand {
+  font-weight: var(--ce-navbar-brand-weight, bold);
+  font-size: var(--ce-navbar-brand-size, 1.25rem);
+  color: var(--ce-navbar-brand-color, #ffffff);
+  text-decoration: var(--ce-navbar-brand-decoration, none);
+}
+.navbar .navbar__links {
+  display: var(--ce-navbar-links-display, flex);
+  gap: var(--ce-navbar-links-gap, 1rem);
+}
+.navbar .navbar__links a {
+  color: var(--ce-navbar-link-color, #ffffff);
+  text-decoration: var(--ce-navbar-link-decoration, none);
+  font-weight: var(--ce-navbar-link-weight, 500);
+}
+.navbar .navbar__links a:hover {
+  text-decoration: var(--ce-navbar-link-hover-decoration, underline);
+}
+.navbar .navbar__menu-toggle {
+  display: var(--ce-navbar-toggle-display, none);
+  background: var(--ce-navbar-toggle-bg, transparent);
+  border: var(--ce-navbar-toggle-border, none);
+  color: var(--ce-navbar-toggle-color, #ffffff);
+  font-size: var(--ce-navbar-toggle-size, 1.5rem);
+}
+@media (min-width: 576px) {
+  .navbar .navbar__menu-toggle {
+    display: var(--ce-navbar-toggle-desktop-display, none);
+  }
+}
+@media (min-width: 576px) {
+  .navbar .navbar__links {
+    display: var(--ce-navbar-links-desktop-display, flex);
+  }
+}
+@media (max-width: 767px) {
+  .navbar {
+    flex-direction: var(--ce-navbar-mobile-direction, column);
+    align-items: var(--ce-navbar-mobile-align, flex-start);
+  }
+  .navbar .navbar__links {
+    display: var(--ce-navbar-mobile-links-display, none);
+    flex-direction: var(--ce-navbar-mobile-links-direction, column);
+    width: var(--ce-navbar-mobile-links-width, 100%);
+  }
+  .navbar .navbar__links.open {
+    display: var(--ce-navbar-mobile-links-open-display, flex);
+  }
+  .navbar .navbar__links a {
+    padding: var(--ce-navbar-mobile-link-padding, 0.5rem 0);
+    border-bottom-width: var(--ce-navbar-mobile-link-border-width, 1px);
+    border-bottom-style: var(--ce-navbar-mobile-link-border-style, solid);
+    border-bottom-color: var(--ce-navbar-mobile-link-border, rgba(255, 255, 255, 0.2));
+  }
+}

package/dist/components/navigation/pagination.css

@@ -0,0 +1,45 @@
+.pagination {
+  display: var(--ce-pagination-display, flex);
+  align-items: var(--ce-pagination-align, center);
+  gap: var(--ce-pagination-gap, 0.5rem);
+  list-style: var(--ce-pagination-list-style, none);
+  padding: var(--ce-pagination-padding, 0);
+  margin: var(--ce-pagination-margin, 1rem 0);
+}
+.pagination__item {
+  display: var(--ce-pagination-item-display, inline-flex);
+  align-items: var(--ce-pagination-item-align, center);
+  justify-content: var(--ce-pagination-item-justify, center);
+  min-width: var(--ce-pagination-item-min-width, 2rem);
+  height: var(--ce-pagination-item-height, 2rem);
+  border-radius: var(--ce-pagination-item-radius, 4px);
+  background-color: var(--ce-pagination-item-bg, var(--theme-pagination-bg, #f8f9fa));
+  color: var(--ce-pagination-item-fg, var(--theme-pagination-fg, #202124));
+  font-size: var(--ce-pagination-item-size, 1rem);
+  font-weight: var(--ce-pagination-item-weight, 500);
+  cursor: var(--ce-pagination-item-cursor, pointer);
+  transition: var(--ce-pagination-item-transition, background-color 0.2s, color 0.2s);
+  border: var(--ce-pagination-item-border, 1px solid var(--theme-pagination-border, #9aa0a6));
+}
+.pagination__item.active {
+  background-color: var(--ce-pagination-item-active-bg, var(--theme-pagination-active-bg, #1a73e8));
+  color: var(--ce-pagination-item-active-fg, var(--theme-pagination-active-fg, #ffffff));
+  border-color: var(--ce-pagination-item-active-border, var(--theme-pagination-active-border, #1a73e8));
+}
+.pagination__item:hover {
+  background-color: var(--ce-pagination-item-hover-bg, var(--theme-pagination-hover-bg, #1a73e8));
+  color: var(--ce-pagination-item-hover-fg, var(--theme-pagination-hover-fg, #ffffff));
+}
+.pagination__item:focus-visible {
+  outline: var(--ce-pagination-item-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-pagination-item-focus-offset, 2px);
+}
+.pagination__ellipsis {
+  min-width: var(--ce-pagination-ellipsis-min-width, 2rem);
+  height: var(--ce-pagination-ellipsis-height, 2rem);
+  display: var(--ce-pagination-ellipsis-display, flex);
+  align-items: var(--ce-pagination-ellipsis-align, center);
+  justify-content: var(--ce-pagination-ellipsis-justify, center);
+  color: var(--ce-pagination-ellipsis-color, var(--theme-pagination-ellipsis, #9aa0a6));
+  font-size: var(--ce-pagination-ellipsis-size, 1rem);
+}

package/dist/components/navigation/sidebar.css

@@ -0,0 +1,35 @@
+.sidebar {
+  width: 250px;
+  background-color: #202124;
+  color: #ffffff;
+  height: 100vh;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.sidebar .sidebar__header {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+.sidebar .sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.sidebar .sidebar__nav a {
+  color: #ffffff;
+  text-decoration: none;
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+.sidebar .sidebar__nav a:hover {
+  background-color: #1a73e8;
+}
+.sidebar .sidebar__nav a.active {
+  background-color: #1a73e8;
+  font-weight: bold;
+}

package/dist/components/navigation/tabs.css

@@ -0,0 +1,25 @@
+.tabs {
+  display: var(--ce-tabs-display, flex);
+  border-bottom: var(--ce-tabs-border, 2px solid var(--theme-tabs-border, #9aa0a6));
+  overflow-x: var(--ce-tabs-overflow, auto);
+  gap: var(--ce-tabs-gap, 1rem);
+}
+.tabs .tab {
+  padding: var(--ce-tabs-tab-padding, 0.5rem 1rem);
+  cursor: var(--ce-tabs-tab-cursor, pointer);
+  font-weight: var(--ce-tabs-tab-weight, 500);
+  border-bottom: var(--ce-tabs-tab-underline, 2px solid transparent);
+  color: var(--ce-tabs-tab-color, var(--theme-tabs-fg, #202124));
+  transition: var(--ce-tabs-tab-transition, border-color 0.2s);
+}
+.tabs .tab.active {
+  border-color: var(--ce-tabs-tab-active-border, var(--theme-tabs-active-border, #1a73e8));
+  color: var(--ce-tabs-tab-active-color, var(--theme-tabs-active-fg, #1a73e8));
+}
+.tabs .tab:hover {
+  border-color: var(--ce-tabs-tab-hover-border, var(--theme-tabs-hover-border, #1a73e8));
+}
+.tabs .tab:hover:focus-visible {
+  outline: var(--ce-tabs-tab-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-tabs-tab-focus-offset, 2px);
+}

package/dist/components/overlays/backdrop.css

@@ -0,0 +1,6 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1050;
+}

package/dist/components/overlays/dropdown.css

@@ -0,0 +1,77 @@
+.dropdown,
+.ce-dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown__trigger, .dropdown__toggle,
+.ce-dropdown__trigger,
+.ce-dropdown__toggle {
+  cursor: var(--ce-dropdown-trigger-cursor, pointer);
+  padding: var(--ce-dropdown-trigger-padding, 0.5rem 1rem);
+  border-width: var(--ce-dropdown-trigger-border-width, 1px);
+  border-style: var(--ce-dropdown-trigger-border-style, solid);
+  border-color: var(--ce-dropdown-trigger-border-color, var(--theme-dropdown-trigger-border, #9aa0a6));
+  border-radius: var(--ce-dropdown-trigger-radius, 4px);
+  background-color: var(--ce-dropdown-trigger-bg, var(--theme-dropdown-trigger-bg, #ffffff));
+  color: var(--ce-dropdown-trigger-color, var(--theme-dropdown-trigger-fg, #202124));
+}
+.dropdown__menu,
+.ce-dropdown__menu {
+  position: absolute;
+  top: var(--ce-dropdown-menu-top, calc(100% + 0.25rem));
+  left: var(--ce-dropdown-menu-left, 0);
+  right: var(--ce-dropdown-menu-right, auto);
+  background-color: var(--ce-dropdown-menu-bg, var(--theme-dropdown-bg, #ffffff));
+  border-width: var(--ce-dropdown-menu-border-width, 1px);
+  border-style: var(--ce-dropdown-menu-border-style, solid);
+  border-color: var(--ce-dropdown-menu-border-color, var(--theme-dropdown-border, #9aa0a6));
+  border-radius: var(--ce-dropdown-menu-radius, 4px);
+  box-shadow: var(--ce-dropdown-menu-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+  min-width: var(--ce-dropdown-menu-min-width, 160px);
+  max-height: var(--ce-dropdown-menu-max-height, 300px);
+  overflow-y: var(--ce-dropdown-menu-overflow, auto);
+  z-index: var(--ce-dropdown-menu-z, 1000);
+  display: block;
+  opacity: var(--ce-dropdown-menu-opacity, 0);
+  visibility: var(--ce-dropdown-menu-visibility, hidden);
+  pointer-events: var(--ce-dropdown-menu-events, none);
+  transform: var(--ce-dropdown-menu-transform, translateY(-0.5rem));
+  transition: opacity var(--ce-dropdown-menu-transition, 0.2s) var(--ce-dropdown-menu-transition-ease, ease), visibility var(--ce-dropdown-menu-transition, 0.2s) var(--ce-dropdown-menu-transition-ease, ease), transform var(--ce-dropdown-menu-transition, 0.2s) var(--ce-dropdown-menu-transition-ease, ease);
+}
+.dropdown__menu.is-visible, .dropdown__menu.open, .dropdown--open .dropdown__menu, .ce-dropdown--open .dropdown__menu, .dropdown__toggle[aria-expanded=true] ~ .dropdown__menu, .ce-dropdown__toggle[aria-expanded=true] ~ .dropdown__menu, .dropdown__trigger[aria-expanded=true] ~ .dropdown__menu, .ce-dropdown__trigger[aria-expanded=true] ~ .dropdown__menu, .dropdown:focus-within .dropdown__menu, .ce-dropdown:focus-within .dropdown__menu, .dropdown:hover .dropdown__menu, .ce-dropdown:hover .dropdown__menu,
+.ce-dropdown__menu.is-visible,
+.ce-dropdown__menu.open,
+.dropdown--open .ce-dropdown__menu,
+.ce-dropdown--open .ce-dropdown__menu,
+.dropdown__toggle[aria-expanded=true] ~ .ce-dropdown__menu,
+.ce-dropdown__toggle[aria-expanded=true] ~ .ce-dropdown__menu,
+.dropdown__trigger[aria-expanded=true] ~ .ce-dropdown__menu,
+.ce-dropdown__trigger[aria-expanded=true] ~ .ce-dropdown__menu,
+.dropdown:focus-within .ce-dropdown__menu,
+.ce-dropdown:focus-within .ce-dropdown__menu,
+.dropdown:hover .ce-dropdown__menu,
+.ce-dropdown:hover .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+  display: block !important;
+}
+.dropdown__menu a,
+.ce-dropdown__menu a {
+  display: block;
+  padding: var(--ce-dropdown-item-padding, 0.5rem 1rem);
+  color: var(--ce-dropdown-item-color, var(--theme-dropdown-item-fg, #202124));
+  text-decoration: none;
+}
+.dropdown__menu a:hover,
+.ce-dropdown__menu a:hover {
+  background-color: var(--ce-dropdown-item-hover-bg, var(--theme-dropdown-item-hover, #f8f9fa));
+}
+.dropdown__menu a:hover:focus-visible,
+.ce-dropdown__menu a:hover:focus-visible {
+  outline-width: var(--ce-dropdown-item-outline-width, 2px);
+  outline-style: var(--ce-dropdown-item-outline-style, solid);
+  outline-color: var(--ce-dropdown-item-outline-color, var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-dropdown-item-outline-offset, 2px);
+}

package/dist/components/overlays/loader.css

@@ -0,0 +1,28 @@
+.loader,
+.ce-loader {
+  width: var(--ce-loader-size, 2rem);
+  height: var(--ce-loader-size, 2rem);
+  border-width: var(--ce-loader-border-width, 3px);
+  border-style: var(--ce-loader-border-style, solid);
+  border-color: var(--ce-loader-border-color, #f8f9fa);
+  border-top-color: var(--ce-loader-border-top-color, #1a73e8);
+  border-radius: var(--ce-loader-radius, 50%);
+  animation: var(--ce-loader-spin, spin 0.75s linear infinite);
+  margin: var(--ce-loader-margin, auto);
+}
+.loader--sm,
+.ce-loader--sm {
+  width: var(--ce-loader-sm-size, 1.5rem);
+  height: var(--ce-loader-sm-size, 1.5rem);
+}
+.loader--lg,
+.ce-loader--lg {
+  width: var(--ce-loader-lg-size, 3rem);
+  height: var(--ce-loader-lg-size, 3rem);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/components/overlays/popover.css

@@ -0,0 +1,54 @@
+.popover {
+  position: absolute;
+  min-width: 200px;
+  max-width: 320px;
+  background-color: var(--theme-popover-bg, #ffffff);
+  color: var(--theme-popover-fg, #202124);
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--theme-popover-border, #9aa0a6);
+  z-index: 1060;
+  padding: 1rem;
+  font-size: 1rem;
+  transition: opacity 0.2s, transform 0.2s;
+  opacity: 0;
+  pointer-events: none;
+}
+.popover__trigger {
+  cursor: pointer;
+}
+.popover__content {
+  position: static;
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  min-width: unset;
+  z-index: auto;
+  display: contents;
+}
+.popover__content.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.popover__content__arrow {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  background: var(--theme-popover-bg, #ffffff);
+  border: 1px solid var(--theme-popover-border, #9aa0a6);
+  transform: rotate(45deg);
+  z-index: -1;
+}
+.popover__content:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.popover--right .popover__content {
+  left: auto;
+  right: 0;
+}
+.popover--top .popover__content {
+  top: auto;
+  bottom: calc(100% + 0.25rem);
+}

package/dist/components/overlays/tooltip.css

@@ -0,0 +1,37 @@
+.tooltip {
+  position: var(--ce-tooltip-position, relative);
+  cursor: var(--ce-tooltip-cursor, help);
+}
+.tooltip__content {
+  position: var(--ce-tooltip-content-position, absolute);
+  bottom: var(--ce-tooltip-content-bottom, 100%);
+  left: var(--ce-tooltip-content-left, 50%);
+  transform: var(--ce-tooltip-content-transform, translateX(-50%) translateY(0.25rem));
+  background-color: var(--ce-tooltip-content-bg, var(--theme-tooltip-bg, #202124));
+  color: var(--ce-tooltip-content-color, var(--theme-tooltip-fg, #ffffff));
+  padding: var(--ce-tooltip-content-padding, 0.25rem 0.5rem);
+  font-size: var(--ce-tooltip-content-size, 0.75rem);
+  white-space: var(--ce-tooltip-content-whitespace, nowrap);
+  border-radius: var(--ce-tooltip-content-radius, 4px);
+  opacity: var(--ce-tooltip-content-opacity, 0);
+  pointer-events: var(--ce-tooltip-content-pointer, none);
+  transition: var(--ce-tooltip-content-transition, opacity 0.2s);
+  z-index: var(--ce-tooltip-content-z, 1090);
+}
+.tooltip__content::after {
+  content: var(--ce-tooltip-arrow-content, "");
+  position: var(--ce-tooltip-arrow-position, absolute);
+  top: var(--ce-tooltip-arrow-top, 100%);
+  left: var(--ce-tooltip-arrow-left, 50%);
+  margin-left: var(--ce-tooltip-arrow-offset, -6px);
+  border-width: var(--ce-tooltip-arrow-size, 6px);
+  border-style: var(--ce-tooltip-arrow-style, solid);
+  border-color: var(--ce-tooltip-arrow-color, var(--theme-tooltip-bg, #202124) transparent transparent transparent);
+}
+.tooltip__content::after:focus-visible {
+  outline: var(--ce-tooltip-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-tooltip-focus-offset, 2px);
+}
+.tooltip:hover .tooltip__content, .tooltip:focus-within .tooltip__content {
+  opacity: var(--ce-tooltip-content-visible-opacity, 1);
+}