.cb-scheme-variant {
  --bg: transparent;
  --text: var(--text-primary);
  --bg-hover: transparent;
  --bg-active: transparent;
  --outline: transparent;
  color: var(--text);
  background-color: var(--bg);
}
.cb-scheme-variant:hover {
  background-color: var(--bg-hover);
}
.cb-scheme-variant:active {
  background-color: var(--bg-active);
}

.cb-primary.cb-solid {
  --text: var(--primary-solid-text-icon);
  --bg: var(--primary-solid-bg);
  --bg-hover: var(--primary-solid-bg-hover);
  --bg-active: var(--primary-solid-bg-active);
}
.cb-primary.cb-outline {
  --text: var(--primary-outline-text-icon);
  --bg-hover: var(--primary-outline-bg-hover);
  --bg-active: var(--primary-outline-bg-active);
  --outline: var(--primary-outline-text-icon);
}
.cb-primary.cb-ghost {
  --text: var(--primary-ghost-text-icon);
  --bg-hover: var(--primary-ghost-bg-hover);
  --bg-active: var(--primary-ghost-bg-active);
}
.cb-primary.cb-muted {
  --text: var(--primary-muted-text-icon);
  --bg: var(--primary-muted-bg);
  --bg-hover: var(--primary-muted-bg-hover);
  --bg-active: var(--primary-muted-bg-active);
}

.cb-secondary.cb-solid {
  --text: var(--secondary-solid-text-icon);
  --bg: var(--secondary-solid-bg);
  --bg-hover: var(--secondary-solid-bg-hover);
  --bg-active: var(--secondary-solid-bg-active);
}
.cb-secondary.cb-outline {
  --text: var(--secondary-outline-text-icon);
  --bg-hover: var(--secondary-outline-bg-hover);
  --bg-active: var(--secondary-outline-bg-active);
  --outline: var(--secondary-outline-text-icon);
}
.cb-secondary.cb-ghost {
  --text: var(--secondary-ghost-text-icon);
  --bg-hover: var(--secondary-ghost-bg-hover);
  --bg-active: var(--secondary-ghost-bg-active);
}
.cb-secondary.cb-muted {
  --text: var(--secondary-muted-text-icon);
  --bg: var(--secondary-muted-bg);
  --bg-hover: var(--secondary-muted-bg-hover);
  --bg-active: var(--secondary-muted-bg-active);
}

.cb-tertiary.cb-solid {
  --text: var(--tertiary-solid-text-icon);
  --bg: var(--tertiary-solid-bg);
  --bg-hover: var(--tertiary-solid-bg-hover);
  --bg-active: var(--tertiary-solid-bg-active);
}
.cb-tertiary.cb-outline {
  --text: var(--tertiary-outline-text-icon);
  --bg-hover: var(--tertiary-outline-bg-hover);
  --bg-active: var(--tertiary-outline-bg-active);
  --outline: var(--tertiary-outline-text-icon);
}
.cb-tertiary.cb-ghost {
  --text: var(--tertiary-ghost-text-icon);
  --bg-hover: var(--tertiary-ghost-bg-hover);
  --bg-active: var(--tertiary-ghost-bg-active);
}
.cb-tertiary.cb-muted {
  --text: var(--tertiary-muted-text-icon);
  --bg: var(--tertiary-muted-bg);
  --bg-hover: var(--tertiary-muted-bg-hover);
  --bg-active: var(--tertiary-muted-bg-active);
}

.cb-success.cb-solid {
  --text: var(--success-solid-text-icon);
  --bg: var(--success-solid-bg);
  --bg-hover: var(--success-solid-bg-hover);
  --bg-active: var(--success-solid-bg-active);
}
.cb-success.cb-outline {
  --text: var(--success-outline-text-icon);
  --bg-hover: var(--success-outline-bg-hover);
  --bg-active: var(--success-outline-bg-active);
  --outline: var(--success-outline-text-icon);
}
.cb-success.cb-ghost {
  --text: var(--success-ghost-text-icon);
  --bg-hover: var(--success-ghost-bg-hover);
  --bg-active: var(--success-ghost-bg-active);
}
.cb-success.cb-muted {
  --text: var(--success-muted-text-icon);
  --bg: var(--success-muted-bg);
  --bg-hover: var(--success-muted-bg-hover);
  --bg-active: var(--success-muted-bg-active);
}

.cb-caution.cb-solid {
  --text: var(--caution-solid-text-icon);
  --bg: var(--caution-solid-bg);
  --bg-hover: var(--caution-solid-bg-hover);
  --bg-active: var(--caution-solid-bg-active);
}
.cb-caution.cb-outline {
  --text: var(--caution-outline-text-icon);
  --bg-hover: var(--caution-outline-bg-hover);
  --bg-active: var(--caution-outline-bg-active);
  --outline: var(--caution-outline-text-icon);
}
.cb-caution.cb-ghost {
  --text: var(--caution-ghost-text-icon);
  --bg-hover: var(--caution-ghost-bg-hover);
  --bg-active: var(--caution-ghost-bg-active);
}
.cb-caution.cb-muted {
  --text: var(--caution-muted-text-icon);
  --bg: var(--caution-muted-bg);
  --bg-hover: var(--caution-muted-bg-hover);
  --bg-active: var(--caution-muted-bg-active);
}

.cb-warning.cb-solid {
  --text: var(--warning-solid-text-icon);
  --bg: var(--warning-solid-bg);
  --bg-hover: var(--warning-solid-bg-hover);
  --bg-active: var(--warning-solid-bg-active);
}
.cb-warning.cb-outline {
  --text: var(--warning-outline-text-icon);
  --bg-hover: var(--warning-outline-bg-hover);
  --bg-active: var(--warning-outline-bg-active);
  --outline: var(--warning-outline-text-icon);
}
.cb-warning.cb-ghost {
  --text: var(--warning-ghost-text-icon);
  --bg-hover: var(--warning-ghost-bg-hover);
  --bg-active: var(--warning-ghost-bg-active);
}
.cb-warning.cb-muted {
  --text: var(--warning-muted-text-icon);
  --bg: var(--warning-muted-bg);
  --bg-hover: var(--warning-muted-bg-hover);
  --bg-active: var(--warning-muted-bg-active);
}

.cb-error.cb-solid {
  --text: var(--error-solid-text-icon);
  --bg: var(--error-solid-bg);
  --bg-hover: var(--error-solid-bg-hover);
  --bg-active: var(--error-solid-bg-active);
}
.cb-error.cb-outline {
  --text: var(--error-outline-text-icon);
  --bg-hover: var(--error-outline-bg-hover);
  --bg-active: var(--error-outline-bg-active);
  --outline: var(--error-outline-text-icon);
}
.cb-error.cb-ghost {
  --text: var(--error-ghost-text-icon);
  --bg-hover: var(--error-ghost-bg-hover);
  --bg-active: var(--error-ghost-bg-active);
}
.cb-error.cb-muted {
  --text: var(--error-muted-text-icon);
  --bg: var(--error-muted-bg);
  --bg-hover: var(--error-muted-bg-hover);
  --bg-active: var(--error-muted-bg-active);
}

.cb-info.cb-solid {
  --text: var(--info-solid-text-icon);
  --bg: var(--info-solid-bg);
  --bg-hover: var(--info-solid-bg-hover);
  --bg-active: var(--info-solid-bg-active);
}
.cb-info.cb-outline {
  --text: var(--info-outline-text-icon);
  --bg-hover: var(--info-outline-bg-hover);
  --bg-active: var(--info-outline-bg-active);
  --outline: var(--info-outline-text-icon);
}
.cb-info.cb-ghost {
  --text: var(--info-ghost-text-icon);
  --bg-hover: var(--info-ghost-bg-hover);
  --bg-active: var(--info-ghost-bg-active);
}
.cb-info.cb-muted {
  --text: var(--info-muted-text-icon);
  --bg: var(--info-muted-bg);
  --bg-hover: var(--info-muted-bg-hover);
  --bg-active: var(--info-muted-bg-active);
}

.theme-light .cb-gray-50 {
  --bg: var(--tertiary-50);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-100 {
  --bg: var(--tertiary-100);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-200 {
  --bg: var(--tertiary-200);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-300 {
  --bg: var(--tertiary-300);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-400 {
  --bg: var(--tertiary-400);
  --text: var(--black-to-white);
}
.theme-light .cb-gray-500 {
  --bg: var(--tertiary-500);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-600 {
  --bg: var(--tertiary-600);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-700 {
  --bg: var(--tertiary-700);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-800 {
  --bg: var(--tertiary-800);
  --text: var(--white-to-black);
}
.theme-light .cb-gray-900 {
  --bg: var(--tertiary-900);
  --text: var(--white-to-black);
}

.theme-dark .cb-gray-50 {
  --bg: var(--tertiary-900);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-100 {
  --bg: var(--tertiary-800);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-200 {
  --bg: var(--tertiary-700);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-300 {
  --bg: var(--tertiary-600);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-400 {
  --bg: var(--tertiary-500);
  --text: var(--black-to-white);
}
.theme-dark .cb-gray-500 {
  --bg: var(--tertiary-400);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-600 {
  --bg: var(--tertiary-300);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-700 {
  --bg: var(--tertiary-200);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-800 {
  --bg: var(--tertiary-100);
  --text: var(--white-to-black);
}
.theme-dark .cb-gray-900 {
  --bg: var(--tertiary-50);
  --text: var(--white-to-black);
}

:root {
  --animation-timing-productive: cubic-bezier(0, 0, 0.44, 0.96);
  --animation-timing-expressive: cubic-bezier(0.645, 0.045, 0.355, 1);
  --animation-timing-entrance-productive: cubic-bezier(0, 0, 0.27, 0.96);
  --animation-timing-entrance-expressive: cubic-bezier(0.05, 0.025, 0.26, 0.96);
  --animation-timing-exit-productive: cubic-bezier(0.2, 0, 1, 0.85);
  --animation-timing-exit-expressive: cubic-bezier(0.1, 0.015, 0.85, 0.1);
  --animation-timing-linear: linear;
}

.btn {
  display: inline-block;
  cursor: pointer;
  border: none;
  min-height: 40px;
  padding: 10px 13px;
  transition: background-color 200ms cubic-bezier(0, 0, 0.44, 0.96), box-shadow 200ms cubic-bezier(0, 0, 0.44, 0.96);
  border-radius: 4px;
  font-family: var(--font-family);
}
.btn.btn-xs {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 12px;
}
.btn.btn-sm {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 14px;
}
.btn.btn-md {
  min-height: 40px;
  padding: 10px 13px;
}
.btn.btn-lg {
  min-height: 48px;
  padding: 14px 17px;
}
.btn.border-radius-0 {
  border-radius: 0;
}
.btn {
  --focus-ring: var(--primary-500);
}
.btn:focus {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
  outline: none;
}
.btn:disabled, .btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
  --bg: var(--disabled-bg) !important;
  --text: var(--disabled-text) !important;
  --outline: var(--disabled-text) !important;
}
.btn:disabled.cb-muted, .btn.disabled.cb-muted {
  --bg: var(--disabled-bg-muted) !important;
}
.btn.cb-outline {
  box-shadow: inset 0 0 0 1px var(--outline);
}
.btn.cb-cta {
  background: linear-gradient(to right, var(--cygnus-500) 0%, var(--fornax-500) 100%);
  color: var(--tertiary-800);
}
.btn.cb-cta:hover {
  background: linear-gradient(to right, var(--cygnus-500) 40%, var(--fornax-500) 100%);
  box-shadow: 0 5px 15px var(--cygnus-500);
  color: var(--tertiary-800);
}
.btn.cb-cta:active {
  background: linear-gradient(to right, var(--cygnus-500) 60%, var(--fornax-500) 100%);
  box-shadow: 0 5px 25px var(--cygnus-500);
  color: var(--tertiary-800);
}
.btn.cb-cta {
  transition: background 600ms cubic-bezier(0, 0, 0.44, 0.96), box-shadow 0.2s cubic-bezier(0, 0, 0.44, 0.96);
}
.btn .no-focus-state:focus {
  --focus-ring: transparent;
}
.btn.btn-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.btn.btn-icon.btn-xs {
  gap: var(--spacing-xxs);
}
.btn.btn-icon.btn-xs .material-symbols-rounded {
  font-size: 12px;
}
.btn.btn-icon.btn-sm {
  gap: var(--spacing-xs);
}
.btn.btn-icon.btn-sm .material-symbols-rounded {
  font-size: 14px;
}
.btn.btn-icon.btn-md {
  gap: var(--spacing-sm);
}
.btn.btn-icon.btn-lg {
  gap: var(--spacing-md);
}

.gradient-highlight-btn {
  position: relative;
  min-width: calc(var(--sizing-lg) * 2);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  transition: border-bottom 0.2s linear;
  border: none;
  padding: var(--spacing-xxs) var(--spacing-md);
}
.gradient-highlight-btn::after {
  content: "";
  position: absolute;
  border-bottom: 0 solid var(--secondary-500);
  background: var(--tertiary-800);
  inset: 0;
  transition: left 0.2s linear;
}
.gradient-highlight-btn.top::after {
  transition-property: bottom;
  bottom: 100%;
}
.gradient-highlight-btn.bottom::after {
  transition-property: top;
  top: 100%;
}
.gradient-highlight-btn.left::after {
  transition-property: right;
  right: 100%;
}
.gradient-highlight-btn.right::after {
  transition-property: left;
  left: 100%;
}
.gradient-highlight-btn.selected {
  background-color: var(--bg-primary);
}
.gradient-highlight-btn.selected.top::after {
  bottom: calc(100% - 2px);
}
.gradient-highlight-btn.selected.bottom::after {
  top: calc(100% - 2px);
}
.gradient-highlight-btn.selected.left::after {
  right: calc(100% - 2px);
}
.gradient-highlight-btn.selected.right::after {
  left: calc(100% - 2px);
}
.gradient-highlight-btn.selected::after {
  background: var(--primary-500);
}
.gradient-highlight-btn:hover {
  color: var(--text-primary);
}
.gradient-highlight-btn:hover.top::after {
  bottom: calc(100% - 2px);
}
.gradient-highlight-btn:hover.bottom::after {
  top: calc(100% - 2px);
}
.gradient-highlight-btn:hover.left::after {
  right: calc(100% - 2px);
}
.gradient-highlight-btn:hover.right::after {
  left: calc(100% - 2px);
}
.gradient-highlight-btn:hover {
  cursor: pointer;
}
.gradient-highlight-btn:focus {
  outline: none;
}

:root {
  /* Primitive Colours */
  /* Sol */
  --sol-50: #ffe7f2;
  --sol-100: #ffb5d8;
  --sol-200: #ff91c5;
  --sol-300: #ff5eaa;
  --sol-400: #ff3f99;
  --sol-500: #ff0f80;
  --sol-600: #e80e74;
  --sol-700: #b50b5b;
  --sol-800: #8c0846;
  --sol-900: #6b0636;
  --sol-0: #fff4f9;
  /* Luna */
  --luna-50: #efe7fb;
  --luna-100: #ccb5f1;
  --luna-200: #b491eb;
  --luna-300: #915ee2;
  --luna-400: #7c3fdc;
  --luna-500: #5b0fd3;
  --luna-600: #530ec0;
  --luna-700: #410b96;
  --luna-800: #320874;
  --luna-900: #260659;
  --luna-0: #f8f4fd;
  /* Aquila */
  --aquila-50: #edeffe;
  --aquila-100: #c8cefa;
  --aquila-200: #adb7f8;
  --aquila-300: #8796f5;
  --aquila-400: #7081f3;
  --aquila-500: #4c62f0;
  --aquila-600: #4559da;
  --aquila-700: #3646aa;
  --aquila-800: #2a3684;
  --aquila-900: #202965;
  --aquila-0: #f7f8fe;
  /* Lyra */
  --lyra-50: #e9fbf5;
  --lyra-100: #bbf3e1;
  --lyra-200: #9aedd2;
  --lyra-300: #6ce4be;
  --lyra-400: #4fdfb1;
  --lyra-500: #23d79e;
  --lyra-600: #20c490;
  --lyra-700: #199970;
  --lyra-800: #137657;
  --lyra-900: #0f5a42;
  --lyra-0: #f5fdfb;
  /* Pyxis */
  --pyxis-50: #fefcec;
  --pyxis-100: #fcf4c3;
  --pyxis-200: #faefa6;
  --pyxis-300: #f8e87e;
  --pyxis-400: #f6e365;
  --pyxis-500: #f4dc3e;
  --pyxis-600: #dec838;
  --pyxis-700: #ad9c2c;
  --pyxis-800: #867922;
  --pyxis-900: #665c1a;
  --pyxis-0: #fffdf6;
  /* Fornax */
  --fornax-50: #fff6ec;
  --fornax-100: #fee3c4;
  --fornax-200: #fdd5a8;
  --fornax-300: #fcc280;
  --fornax-400: #fcb667;
  --fornax-500: #fba441;
  --fornax-600: #e4953b;
  --fornax-700: #b2742e;
  --fornax-800: #8a5a24;
  --fornax-900: #69451b;
  --fornax-0: #fffbf6;
  /* Cygnus */
  --cygnus-50: #feeded;
  --cygnus-100: #fcc6c8;
  --cygnus-200: #fbaaae;
  --cygnus-300: #f98389;
  --cygnus-400: #f86b72;
  --cygnus-500: #f6464f;
  --cygnus-600: #e04048;
  --cygnus-700: #af3238;
  --cygnus-800: #87272b;
  --cygnus-900: #671d21;
  --cygnus-0: #fff7f7;
  /* Neutral */
  --neutral-white: #fff;
  --neutral-black: #000;
  /* Greys */
  --grey-50: #fafafa;
  --grey-100: #e1e1e2;
  --grey-200: #c8c8ca;
  --grey-300: #afaeb2;
  --grey-400: #96959a;
  --grey-500: #7e7c81;
  --grey-600: #656369;
  --grey-700: #4c4951;
  --grey-800: #333039;
  --grey-900: #1a1721;
  /* Semantic Colours */
  /* Primary */
  --primary-50: var(--sol-50);
  --primary-100: var(--sol-100);
  --primary-200: var(--sol-200);
  --primary-300: var(--sol-300);
  --primary-400: var(--sol-400);
  --primary-500: var(--sol-500);
  --primary-600: var(--sol-600);
  --primary-700: var(--sol-700);
  --primary-800: var(--sol-800);
  --primary-900: var(--sol-900);
  /* Secondary */
  --secondary-50: var(--luna-50);
  --secondary-100: var(--luna-100);
  --secondary-200: var(--luna-200);
  --secondary-300: var(--luna-300);
  --secondary-400: var(--luna-400);
  --secondary-500: var(--luna-500);
  --secondary-600: var(--luna-600);
  --secondary-700: var(--luna-700);
  --secondary-800: var(--luna-800);
  --secondary-900: var(--luna-900);
  /* Tertiary */
  --tertiary-50: var(--grey-50);
  --tertiary-100: var(--grey-100);
  --tertiary-200: var(--grey-200);
  --tertiary-300: var(--grey-300);
  --tertiary-400: var(--grey-400);
  --tertiary-500: var(--grey-500);
  --tertiary-600: var(--grey-600);
  --tertiary-700: var(--grey-700);
  --tertiary-800: var(--grey-800);
  --tertiary-900: var(--grey-900);
  /* Info */
  --info-50: var(--aquila-50);
  --info-100: var(--aquila-100);
  --info-200: var(--aquila-200);
  --info-300: var(--aquila-300);
  --info-400: var(--aquila-400);
  --info-500: var(--aquila-500);
  --info-600: var(--aquila-600);
  --info-700: var(--aquila-700);
  --info-800: var(--aquila-800);
  --info-900: var(--aquila-900);
  /* Success */
  --success-50: var(--lyra-50);
  --success-100: var(--lyra-100);
  --success-200: var(--lyra-200);
  --success-300: var(--lyra-300);
  --success-400: var(--lyra-400);
  --success-500: var(--lyra-500);
  --success-600: var(--lyra-600);
  --success-700: var(--lyra-700);
  --success-800: var(--lyra-800);
  --success-900: var(--lyra-900);
  /* Caution */
  --caution-50: var(--pyxis-50);
  --caution-100: var(--pyxis-100);
  --caution-200: var(--pyxis-200);
  --caution-300: var(--pyxis-300);
  --caution-400: var(--pyxis-400);
  --caution-500: var(--pyxis-500);
  --caution-600: var(--pyxis-600);
  --caution-700: var(--pyxis-700);
  --caution-800: var(--pyxis-800);
  --caution-900: var(--pyxis-900);
  /* Warning */
  --warning-50: var(--fornax-50);
  --warning-100: var(--fornax-100);
  --warning-200: var(--fornax-200);
  --warning-300: var(--fornax-300);
  --warning-400: var(--fornax-400);
  --warning-500: var(--fornax-500);
  --warning-600: var(--fornax-600);
  --warning-700: var(--fornax-700);
  --warning-800: var(--fornax-800);
  --warning-900: var(--fornax-900);
  /* Error */
  --error-50: var(--cygnus-50);
  --error-100: var(--cygnus-100);
  --error-200: var(--cygnus-200);
  --error-300: var(--cygnus-300);
  --error-400: var(--cygnus-400);
  --error-500: var(--cygnus-500);
  --error-600: var(--cygnus-600);
  --error-700: var(--cygnus-700);
  --error-800: var(--cygnus-800);
  --error-900: var(--cygnus-900);
  /* UI Colour Tokens */
}
:root .theme-light {
  /* Backgrounds */
  --bg-primary: var(--neutral-white);
  --bg-secondary: var(--tertiary-50);
  --bg-tertiary: var(--tertiary-100);
  /* Text */
  --text-primary: var(--neutral-black);
  --text-secondary: var(--tertiary-700);
  --text-tertiary: var(--tertiary-500);
  --text-white: var(--neutral-white);
  --text-black: var(--neutral-black);
  --text-success: var(--success-600);
  --text-error: var(--error-500);
  --text-info: var(--info-500);
  --text-placeholder: var(--tertiary-400);
  /* Primary */
  --primary-solid-bg: var(--primary-500);
  --primary-outline-text-icon: var(--primary-600);
  --primary-ghost-text-icon: var(--primary-600);
  --primary-muted-text-icon: var(--primary-600);
  --primary-muted-bg: #ff0f801f;
  --primary-solid-bg-hover: var(--primary-400);
  --primary-solid-bg-active: var(--primary-600);
  --primary-muted-bg-hover: #ff0f8033;
  --primary-muted-bg-active: #ff0f8047;
  --primary-outline-bg-hover: #ff0f8014;
  --primary-outline-bg-active: #ff0f8029;
  --primary-ghost-bg-active: #ff0f8029;
  --primary-ghost-bg-hover: #ff0f8014;
  --primary-solid-text-icon: var(--neutral-white);
  /* Secondary */
  --secondary-solid-bg: var(--secondary-500);
  --secondary-outline-text-icon: var(--secondary-600);
  --secondary-ghost-text-icon: var(--secondary-600);
  --secondary-muted-text-icon: var(--secondary-600);
  --secondary-muted-bg: #5b0fd31f;
  --secondary-muted-bg-hover: #5b0fd333;
  --secondary-muted-bg-active: #5b0fd347;
  --secondary-solid-bg-hover: var(--secondary-400);
  --secondary-solid-bg-active: var(--secondary-600);
  --secondary-outline-bg-hover: #5b0fd314;
  --secondary-outline-bg-active: #5b0fd329;
  --secondary-ghost-bg-hover: #5b0fd314;
  --secondary-ghost-bg-active: #5b0fd329;
  --secondary-solid-text-icon: var(--neutral-white);
  /* Tertiary */
  --tertiary-solid-bg: var(--neutral-black);
  --tertiary-outline-text-icon: var(--neutral-black);
  --tertiary-ghost-text-icon: var(--neutral-black);
  --tertiary-muted-text-icon: var(--neutral-black);
  --tertiary-muted-bg: #0000001f;
  --tertiary-solid-bg-hover: var(--tertiary-800);
  --tertiary-solid-bg-active: var(--tertiary-900);
  --tertiary-outline-bg-hover: #00000014;
  --tertiary-outline-bg-active: #00000029;
  --tertiary-ghost-bg-hover: #00000014;
  --tertiary-ghost-bg-active: #00000029;
  --tertiary-muted-bg-hover: #0003;
  --tertiary-muted-bg-active: #00000047;
  --tertiary-solid-text-icon: var(--neutral-white);
  /* Success */
  --success-solid-bg: var(--success-500);
  --success-outline-text-icon: var(--success-600);
  --success-ghost-text-icon: var(--success-600);
  --success-muted-text-icon: var(--success-700);
  --success-muted-bg: #23d79e1f;
  --success-solid-bg-hover: var(--success-400);
  --success-solid-bg-active: var(--success-600);
  --success-outline-bg-hover: #23d79e14;
  --success-outline-bg-active: #23d79e29;
  --success-ghost-bg-hover: #23d79e14;
  --success-ghost-bg-active: #23d79e29;
  --success-muted-bg-hover: #23d79e33;
  --success-muted-bg-active: #23d79e47;
  --success-solid-text-icon: var(--neutral-black);
  /* Caution */
  --caution-solid-bg: var(--caution-500);
  --caution-outline-text-icon: var(--caution-600);
  --caution-ghost-text-icon: var(--caution-600);
  --caution-muted-text-icon: var(--caution-600);
  --caution-muted-bg: #f4dc3e1f;
  --caution-solid-bg-hover: var(--caution-400);
  --caution-solid-bg-active: var(--caution-600);
  --caution-outline-bg-hover: #f4dc3e14;
  --caution-outline-bg-active: #f4dc3e29;
  --caution-ghost-bg-hover: #f4dc3e14;
  --caution-ghost-bg-active: #f4dc3e29;
  --caution-muted-bg-hover: #f4dc3e33;
  --caution-muted-bg-active: #f4dc3e47;
  --caution-solid-text-icon: var(--neutral-black);
  /* Warning */
  --warning-solid-bg: var(--warning-500);
  --warning-outline-text-icon: var(--warning-600);
  --warning-ghost-text-icon: var(--warning-600);
  --warning-muted-text-icon: var(--warning-600);
  --warning-muted-bg: #fba4411f;
  --warning-solid-bg-hover: var(--warning-400);
  --warning-solid-bg-active: var(--warning-600);
  --warning-outline-bg-hover: #fba44114;
  --warning-outline-bg-active: #fba44129;
  --warning-ghost-bg-hover: #fba44114;
  --warning-ghost-bg-active: #fba44129;
  --warning-muted-bg-hover: #fba44133;
  --warning-muted-bg-active: #fba44147;
  --warning-solid-text-icon: var(--neutral-black);
  /* Error */
  --error-solid-bg: var(--error-500);
  --error-outline-text-icon: var(--error-600);
  --error-ghost-text-icon: var(--error-600);
  --error-muted-text-icon: var(--error-600);
  --error-muted-bg: #f6464f1f;
  --error-solid-bg-hover: var(--error-400);
  --error-solid-bg-active: var(--error-600);
  --error-outline-bg-hover: #f6464f14;
  --error-outline-bg-active: #f6464f29;
  --error-ghost-bg-hover: #f6464f14;
  --error-ghost-bg-active: #f6464f29;
  --error-muted-bg-hover: #f6464f33;
  --error-muted-bg-active: #f6464f47;
  --error-solid-text-icon: var(--neutral-black);
  /* Info */
  --info-solid-bg: var(--info-500);
  --info-outline-text-icon: var(--info-600);
  --info-ghost-text-icon: var(--info-600);
  --info-muted-text-icon: var(--info-600);
  --info-muted-bg: #4c62f01f;
  --info-solid-bg-hover: var(--info-400);
  --info-solid-bg-active: var(--info-600);
  --info-outline-bg-hover: #4c62f014;
  --info-outline-bg-active: #4c62f029;
  --info-ghost-bg-hover: #4c62f014;
  --info-ghost-bg-active: #4c62f029;
  --info-muted-bg-hover: #4c62f033;
  --info-muted-bg-active: #4c62f047;
  --info-solid-text-icon: var(--neutral-white);
  /* Disabled */
  --disabled-text: var(--tertiary-300);
  --disabled-bg: var(--tertiary-100);
  --disabled-bg-muted: #0000000a;
  --disabled-line: var(--tertiary-100);
  --disabled-icon: var(--tertiary-400);
  /* Link */
  --link-default: var(--info-500);
  --link-visited: var(--secondary-300);
  /* General */
  --white-to-black: var(--neutral-white);
  --line-colour: var(--tertiary-300);
  --black-to-white: var(--neutral-black);
  --grey-light: var(--tertiary-50);
  --grey-medium: var(--tertiary-100);
  --grey-heavy: var(--tertiary-200);
  --line-success: var(--text-success);
  --line-error: var(--text-error);
  --line-disabled: var(--disabled-text);
  --drop-shadow: #7e7c813d;
  --line-colour-light: var(--tertiary-100);
  --textbox-bg-default: #ffffff80;
  --textbox-bg-active: var(--tertiary-50);
  --textbox-bg-disabled: var(--disabled-bg);
}
:root .theme-dark {
  /* Backgrounds */
  --bg-primary: var(--tertiary-900);
  --bg-secondary: var(--tertiary-800);
  --bg-tertiary: var(--tertiary-700);
  /* Text */
  --text-primary: var(--neutral-white);
  --text-secondary: var(--tertiary-100);
  --text-tertiary: var(--tertiary-300);
  --text-white: var(--neutral-white);
  --text-black: var(--neutral-black);
  --text-success: var(--success-500);
  --text-error: var(--error-400);
  --text-info: var(--info-400);
  --text-placeholder: var(--tertiary-500);
  /* Primary */
  --primary-solid-bg: var(--primary-400);
  --primary-outline-text-icon: var(--primary-300);
  --primary-ghost-text-icon: var(--primary-300);
  --primary-muted-text-icon: var(--primary-300);
  --primary-muted-bg: #ff0f803d;
  --primary-solid-bg-hover: var(--primary-300);
  --primary-solid-bg-active: var(--primary-500);
  --primary-muted-bg-hover: #ff0f8052;
  --primary-muted-bg-active: #ff0f8066;
  --primary-outline-bg-hover: #ff0f803d;
  --primary-outline-bg-active: #ff0f8052;
  --primary-ghost-bg-active: #ff0f8052;
  --primary-ghost-bg-hover: #ff0f803d;
  --primary-solid-text-icon: var(--neutral-white);
  /* Secondary */
  --secondary-solid-bg: var(--secondary-400);
  --secondary-outline-text-icon: var(--secondary-200);
  --secondary-ghost-text-icon: var(--secondary-200);
  --secondary-muted-text-icon: var(--secondary-200);
  --secondary-muted-bg: #5b0fd33d;
  --secondary-muted-bg-hover: #5b0fd352;
  --secondary-muted-bg-active: #5b0fd366;
  --secondary-solid-bg-hover: var(--secondary-300);
  --secondary-solid-bg-active: var(--secondary-500);
  --secondary-outline-bg-hover: #5b0fd33d;
  --secondary-outline-bg-active: #5b0fd352;
  --secondary-ghost-bg-hover: #5b0fd33d;
  --secondary-ghost-bg-active: #5b0fd352;
  --secondary-solid-text-icon: var(--neutral-white);
  /* Tertiary */
  --tertiary-solid-bg: var(--neutral-white);
  --tertiary-outline-text-icon: var(--neutral-white);
  --tertiary-ghost-text-icon: var(--neutral-white);
  --tertiary-muted-text-icon: var(--neutral-white);
  --tertiary-muted-bg: #ffffff3d;
  --tertiary-solid-bg-hover: var(--tertiary-50);
  --tertiary-solid-bg-active: var(--tertiary-100);
  --tertiary-outline-bg-hover: #ffffff3d;
  --tertiary-outline-bg-active: #ffffff52;
  --tertiary-ghost-bg-hover: #ffffff3d;
  --tertiary-ghost-bg-active: #ffffff52;
  --tertiary-muted-bg-hover: #ffffff52;
  --tertiary-muted-bg-active: #fff6;
  --tertiary-solid-text-icon: var(--neutral-black);
  /* Success */
  --success-solid-bg: var(--success-400);
  --success-outline-text-icon: var(--success-300);
  --success-ghost-text-icon: var(--success-300);
  --success-muted-text-icon: var(--grey-900);
  --success-muted-bg: #23d79e3d;
  --success-solid-bg-hover: var(--success-300);
  --success-solid-bg-active: var(--success-500);
  --success-outline-bg-hover: #23d79e3d;
  --success-outline-bg-active: #23d79e52;
  --success-ghost-bg-hover: #23d79e3d;
  --success-ghost-bg-active: #23d79e52;
  --success-muted-bg-hover: #23d79e52;
  --success-muted-bg-active: #23d79e66;
  --success-solid-text-icon: var(--neutral-black);
  /* Caution */
  --caution-solid-bg: var(--caution-400);
  --caution-outline-text-icon: var(--caution-300);
  --caution-ghost-text-icon: var(--caution-300);
  --caution-muted-text-icon: var(--caution-300);
  --caution-muted-bg: #f4dc3e3d;
  --caution-solid-bg-hover: var(--caution-300);
  --caution-solid-bg-active: var(--caution-500);
  --caution-outline-bg-hover: #f4dc3e3d;
  --caution-outline-bg-active: #f4dc3e52;
  --caution-ghost-bg-hover: #f4dc3e3d;
  --caution-ghost-bg-active: #f4dc3e52;
  --caution-muted-bg-hover: #f4dc3e52;
  --caution-muted-bg-active: #f4dc3e66;
  --caution-solid-text-icon: var(--neutral-black);
  /* Warning */
  --warning-solid-bg: var(--warning-400);
  --warning-outline-text-icon: var(--warning-300);
  --warning-ghost-text-icon: var(--warning-300);
  --warning-muted-text-icon: var(--warning-300);
  --warning-muted-bg: #fba4413d;
  --warning-solid-bg-hover: var(--warning-300);
  --warning-solid-bg-active: var(--warning-500);
  --warning-outline-bg-hover: #fba4413d;
  --warning-outline-bg-active: #fba44152;
  --warning-ghost-bg-hover: #fba4413d;
  --warning-ghost-bg-active: #fba44152;
  --warning-muted-bg-hover: #fba44152;
  --warning-muted-bg-active: #fba44166;
  --warning-solid-text-icon: var(--neutral-black);
  /* Error */
  --error-solid-bg: var(--error-400);
  --error-outline-text-icon: var(--error-300);
  --error-ghost-text-icon: var(--error-300);
  --error-muted-text-icon: var(--error-300);
  --error-muted-bg: #f6464f3d;
  --error-solid-bg-hover: var(--error-300);
  --error-solid-bg-active: var(--error-500);
  --error-outline-bg-hover: #f6464f3d;
  --error-outline-bg-active: #f6464f52;
  --error-ghost-bg-hover: #f6464f3d;
  --error-ghost-bg-active: #f6464f52;
  --error-muted-bg-hover: #f6464f52;
  --error-muted-bg-active: #f6464f66;
  --error-solid-text-icon: var(--neutral-black);
  /* Info */
  --info-solid-bg: var(--info-400);
  --info-outline-text-icon: var(--info-200);
  --info-ghost-text-icon: var(--info-200);
  --info-muted-text-icon: var(--info-200);
  --info-muted-bg: #4c62f03d;
  --info-solid-bg-hover: var(--info-300);
  --info-solid-bg-active: var(--info-500);
  --info-outline-bg-hover: #4c62f03d;
  --info-outline-bg-active: #4c62f052;
  --info-ghost-bg-hover: #4c62f03d;
  --info-ghost-bg-active: #4c62f052;
  --info-muted-bg-hover: #4c62f052;
  --info-muted-bg-active: #4c62f066;
  --info-solid-text-icon: var(--neutral-white);
  /* Disabled */
  --disabled-text: var(--tertiary-400);
  --disabled-bg: var(--tertiary-700);
  --disabled-bg-muted: #ffffff0a;
  --disabled-line: var(--tertiary-800);
  --disabled-icon: var(--tertiary-400);
  /* Link */
  --link-default: var(--info-300);
  --link-visited: var(--secondary-200);
  /* General */
  --white-to-black: var(--neutral-black);
  --line-colour: var(--tertiary-600);
  --black-to-white: var(--neutral-white);
  --grey-light: var(--tertiary-400);
  --grey-medium: var(--tertiary-500);
  --grey-heavy: var(--tertiary-600);
  --line-success: var(--text-success);
  --line-error: var(--text-error);
  --line-disabled: var(--disabled-text);
  --drop-shadow: #0000003d;
  --line-colour-light: var(--tertiary-800);
  --textbox-bg-default: #4c495129;
  --textbox-bg-active: var(--tertiary-800);
  --textbox-bg-disabled: var(--disabled-bg);
}

:root {
  --typography-xs: 0.5rem;
  --typography-sm: 0.75rem;
  --typography-md: 0.875rem;
  --typography-lg: 1rem;
  --typography-xl: 1.25rem;
  --typography-xxl: 1.5rem;
  --typography-xxxl: 2rem;
  --font-family: Lato, sans-serif;
  --font-family-heading: filson-soft, sans-serif;
  --font-family-monospace: source-code-pro, menlo, monaco, consolas, Courier New, monospace;
  --sizing-xs: 24px;
  --sizing-sm: 32px;
  --sizing-md: 56px;
  --sizing-lg: 64px;
  --sizing-xl: 256px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --animation-productive: cubic-bezier(0.000, 0.000, 0.440, 0.960);
  --animation-expressive: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --animation-entrance-productive: cubic-bezier(0.000, 0.000, 0.270, 0.960);
  --animation-entrance-expressive: cubic-bezier(0.050, 0.025, 0.260, 0.960);
  --animation-exit-productive: cubic-bezier(0.200, 0.000, 1.000, 0.850);
  --animation-exit-expressive: cubic-bezier(0.100, 0.015, 0.850, 0.100);
  --animation-linear: linear;
  --breakpoint-xxxs: 380px;
  --breakpoint-xxs: 480px;
  --breakpoint-xs: 640px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
  --color-ailab: var(--sol-500);
  --color-chatstudio: var(--luna-500);
  --color-chat: var(--luna-500);
  --color-docs: var(--fornax-500);
  --color-mattermost: var(--aquila-500);
  /* Icon sizes */
  --icon-size-lg: 1rem;
  /* 16px */
  --icon-size-md: 0.75rem;
  /* 12px */
  --icon-size-sm: 0.625rem;
  /* 10px */
  --icon-size-xl: 1.25rem;
  /* 20px */
  --icon-size-xs: 0.5rem;
  /* 8px */
  --icon-size-xxl: 1.5rem;
  /* 24px */
  /* Padding */
  --padding-lg: 1rem;
  /* 16px */
  --padding-md: 0.75rem;
  /* 12px */
  --padding-sm: 0.5rem;
  /* 8px */
  --padding-x1: 0.125rem;
  /* 2px */
  --padding-x3: 0.375rem;
  /* 6px */
  --padding-x5: 0.625rem;
  /* 10px */
  --padding-x7: 0.875rem;
  /* 14px */
  --padding-x9: 1.125rem;
  /* 18px */
  --padding-x10: 1.25rem;
  /* 20px */
  --padding-x12: 1.5rem;
  /* 24px */
  --padding-xs: 0.25rem;
  /* 4px */
  /* Radius */
  --radius-0: 0;
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-pill: 62.4375rem;
  /* 999px */
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-xs: 0.125rem;
  /* 2px */
}

.icon {
  display: inline-block;
}

input {
  color: var(--text-primary);
}

.material-symbols-rounded.filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-rounded.icon-with-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.material-symbols-rounded.icon-xs {
  font-size: var(--typography-xs);
}
.material-symbols-rounded.icon-sm {
  font-size: var(--typography-sm);
}
.material-symbols-rounded.icon-md {
  font-size: var(--typography-md);
}
.material-symbols-rounded.icon-lg {
  font-size: var(--typography-lg);
}

/* stylelint-disable no-descending-specificity */
.properties-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.properties-tabs__header {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.properties-tab {
  padding: 4px 8px;
  height: 24px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
}
.properties-tab.selected {
  background: var(--bg);
}
.properties-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.properties-tab:hover:not(.disabled) {
  background: var(--bg-hover);
}
.properties-tab:hover:not(.disabled).selected {
  background: var(--bg-active);
}
.properties-tab {
  --text: var(--text-primary);
  --bg: rgb(0 0 0 / 8%);
  --bg-hover: rgb(0 0 0 / 4%);
  --bg-active: rgb(0 0 0 / 12%);
}
.properties-tab .cb-primary.cb-solid {
  --text: var(--primary-solid-text-icon);
  --bg: var(--primary-solid-bg);
  --bg-hover: var(--primary-solid-bg-hover);
  --bg-active: var(--primary-solid-bg-active);
}
.properties-tab .cb-primary.cb-outline {
  --text: var(--primary-outline-text-icon);
  --bg-hover: var(--primary-outline-bg-hover);
  --bg-active: var(--primary-outline-bg-active);
  --outline: var(--primary-outline-text-icon);
}
.properties-tab .cb-primary.cb-ghost {
  --text: var(--primary-ghost-text-icon);
  --bg-hover: var(--primary-ghost-bg-hover);
  --bg-active: var(--primary-ghost-bg-active);
}
.properties-tab .cb-primary.cb-muted {
  --text: var(--primary-muted-text-icon);
  --bg: var(--primary-muted-bg);
  --bg-hover: var(--primary-muted-bg-hover);
  --bg-active: var(--primary-muted-bg-active);
}
.properties-tab .cb-secondary.cb-solid {
  --text: var(--secondary-solid-text-icon);
  --bg: var(--secondary-solid-bg);
  --bg-hover: var(--secondary-solid-bg-hover);
  --bg-active: var(--secondary-solid-bg-active);
}
.properties-tab .cb-secondary.cb-outline {
  --text: var(--secondary-outline-text-icon);
  --bg-hover: var(--secondary-outline-bg-hover);
  --bg-active: var(--secondary-outline-bg-active);
  --outline: var(--secondary-outline-text-icon);
}
.properties-tab .cb-secondary.cb-ghost {
  --text: var(--secondary-ghost-text-icon);
  --bg-hover: var(--secondary-ghost-bg-hover);
  --bg-active: var(--secondary-ghost-bg-active);
}
.properties-tab .cb-secondary.cb-muted {
  --text: var(--secondary-muted-text-icon);
  --bg: var(--secondary-muted-bg);
  --bg-hover: var(--secondary-muted-bg-hover);
  --bg-active: var(--secondary-muted-bg-active);
}
.properties-tab .cb-tertiary.cb-solid {
  --text: var(--tertiary-solid-text-icon);
  --bg: var(--tertiary-solid-bg);
  --bg-hover: var(--tertiary-solid-bg-hover);
  --bg-active: var(--tertiary-solid-bg-active);
}
.properties-tab .cb-tertiary.cb-outline {
  --text: var(--tertiary-outline-text-icon);
  --bg-hover: var(--tertiary-outline-bg-hover);
  --bg-active: var(--tertiary-outline-bg-active);
  --outline: var(--tertiary-outline-text-icon);
}
.properties-tab .cb-tertiary.cb-ghost {
  --text: var(--tertiary-ghost-text-icon);
  --bg-hover: var(--tertiary-ghost-bg-hover);
  --bg-active: var(--tertiary-ghost-bg-active);
}
.properties-tab .cb-tertiary.cb-muted {
  --text: var(--tertiary-muted-text-icon);
  --bg: var(--tertiary-muted-bg);
  --bg-hover: var(--tertiary-muted-bg-hover);
  --bg-active: var(--tertiary-muted-bg-active);
}
.properties-tab .cb-success.cb-solid {
  --text: var(--success-solid-text-icon);
  --bg: var(--success-solid-bg);
  --bg-hover: var(--success-solid-bg-hover);
  --bg-active: var(--success-solid-bg-active);
}
.properties-tab .cb-success.cb-outline {
  --text: var(--success-outline-text-icon);
  --bg-hover: var(--success-outline-bg-hover);
  --bg-active: var(--success-outline-bg-active);
  --outline: var(--success-outline-text-icon);
}
.properties-tab .cb-success.cb-ghost {
  --text: var(--success-ghost-text-icon);
  --bg-hover: var(--success-ghost-bg-hover);
  --bg-active: var(--success-ghost-bg-active);
}
.properties-tab .cb-success.cb-muted {
  --text: var(--success-muted-text-icon);
  --bg: var(--success-muted-bg);
  --bg-hover: var(--success-muted-bg-hover);
  --bg-active: var(--success-muted-bg-active);
}
.properties-tab .cb-caution.cb-solid {
  --text: var(--caution-solid-text-icon);
  --bg: var(--caution-solid-bg);
  --bg-hover: var(--caution-solid-bg-hover);
  --bg-active: var(--caution-solid-bg-active);
}
.properties-tab .cb-caution.cb-outline {
  --text: var(--caution-outline-text-icon);
  --bg-hover: var(--caution-outline-bg-hover);
  --bg-active: var(--caution-outline-bg-active);
  --outline: var(--caution-outline-text-icon);
}
.properties-tab .cb-caution.cb-ghost {
  --text: var(--caution-ghost-text-icon);
  --bg-hover: var(--caution-ghost-bg-hover);
  --bg-active: var(--caution-ghost-bg-active);
}
.properties-tab .cb-caution.cb-muted {
  --text: var(--caution-muted-text-icon);
  --bg: var(--caution-muted-bg);
  --bg-hover: var(--caution-muted-bg-hover);
  --bg-active: var(--caution-muted-bg-active);
}
.properties-tab .cb-warning.cb-solid {
  --text: var(--warning-solid-text-icon);
  --bg: var(--warning-solid-bg);
  --bg-hover: var(--warning-solid-bg-hover);
  --bg-active: var(--warning-solid-bg-active);
}
.properties-tab .cb-warning.cb-outline {
  --text: var(--warning-outline-text-icon);
  --bg-hover: var(--warning-outline-bg-hover);
  --bg-active: var(--warning-outline-bg-active);
  --outline: var(--warning-outline-text-icon);
}
.properties-tab .cb-warning.cb-ghost {
  --text: var(--warning-ghost-text-icon);
  --bg-hover: var(--warning-ghost-bg-hover);
  --bg-active: var(--warning-ghost-bg-active);
}
.properties-tab .cb-warning.cb-muted {
  --text: var(--warning-muted-text-icon);
  --bg: var(--warning-muted-bg);
  --bg-hover: var(--warning-muted-bg-hover);
  --bg-active: var(--warning-muted-bg-active);
}
.properties-tab .cb-error.cb-solid {
  --text: var(--error-solid-text-icon);
  --bg: var(--error-solid-bg);
  --bg-hover: var(--error-solid-bg-hover);
  --bg-active: var(--error-solid-bg-active);
}
.properties-tab .cb-error.cb-outline {
  --text: var(--error-outline-text-icon);
  --bg-hover: var(--error-outline-bg-hover);
  --bg-active: var(--error-outline-bg-active);
  --outline: var(--error-outline-text-icon);
}
.properties-tab .cb-error.cb-ghost {
  --text: var(--error-ghost-text-icon);
  --bg-hover: var(--error-ghost-bg-hover);
  --bg-active: var(--error-ghost-bg-active);
}
.properties-tab .cb-error.cb-muted {
  --text: var(--error-muted-text-icon);
  --bg: var(--error-muted-bg);
  --bg-hover: var(--error-muted-bg-hover);
  --bg-active: var(--error-muted-bg-active);
}
.properties-tab .cb-info.cb-solid {
  --text: var(--info-solid-text-icon);
  --bg: var(--info-solid-bg);
  --bg-hover: var(--info-solid-bg-hover);
  --bg-active: var(--info-solid-bg-active);
}
.properties-tab .cb-info.cb-outline {
  --text: var(--info-outline-text-icon);
  --bg-hover: var(--info-outline-bg-hover);
  --bg-active: var(--info-outline-bg-active);
  --outline: var(--info-outline-text-icon);
}
.properties-tab .cb-info.cb-ghost {
  --text: var(--info-ghost-text-icon);
  --bg-hover: var(--info-ghost-bg-hover);
  --bg-active: var(--info-ghost-bg-active);
}
.properties-tab .cb-info.cb-muted {
  --text: var(--info-muted-text-icon);
  --bg: var(--info-muted-bg);
  --bg-hover: var(--info-muted-bg-hover);
  --bg-active: var(--info-muted-bg-active);
}

.theme-dark .properties-tab.selected {
  background: rgba(255, 255, 255, 0.16);
}
.theme-dark .properties-tab:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.04);
}
.theme-dark .properties-tab:hover:not(.disabled).selected {
  background: rgba(255, 255, 255, 0.2);
}

.scrollbar-regular::-webkit-scrollbar,
.scrollbar-thin::-webkit-scrollbar {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-track,
.scrollbar-thin::-webkit-scrollbar-track {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-corner,
.scrollbar-thin::-webkit-scrollbar-corner {
  background-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-thumb,
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tertiary-muted-bg-hover);
  border-color: var(--bg-primary);
}
.scrollbar-regular::-webkit-scrollbar-thumb:hover,
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--tertiary-muted-bg-active);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-regular::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.slim-input-container {
  display: flex;
}
.slim-input-container.single-line {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.slim-input-container.multi-line {
  flex-direction: column;
  gap: 8px;
}
.slim-input-container label {
  font-size: 12px;
}

.slim-input-with-affix {
  position: relative;
}
.slim-input-with-affix .prefix {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.slim-input-with-affix .suffix {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.slim-input-with-affix .prefix.empty,
.slim-input-with-affix .suffix.empty {
  color: var(--text-tertiary);
}
.slim-input-with-affix .prefix.has-value,
.slim-input-with-affix .suffix.has-value {
  color: var(--text-primary);
}
.slim-input-with-affix.disabled .prefix,
.slim-input-with-affix.disabled .suffix, .slim-input-with-affix.read-only .prefix,
.slim-input-with-affix.read-only .suffix {
  color: var(--text-tertiary);
}

.slim-input {
  border: 1px solid var(--line-colour-light);
  font-size: 12px;
  padding: 4px 8px;
}
.slim-input:focus {
  outline: none;
  border: 1px solid var(--line-colour);
  background: var(--textbox-bg-active);
}
.slim-input.disabled, .slim-input.read-only {
  background: var(--textbox-bg-disabled);
  color: var(--text-tertiary);
}
.slim-input.enabled {
  background: var(--textbox-bg-default);
  color: var(--text-primary);
}

.prefix-icon {
  color: var(--text-placeholder);
  font-size: 18px;
}

.slim-search-input {
  position: relative;
  width: 400px;
}
.slim-search-input input {
  border-radius: 4px;
  padding: 4px 8px;
  border: 1px solid var(--line-colour);
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  background: var(--textbox-bg-default);
}
.slim-search-input input:focus {
  background: var(--textbox-bg-active);
  outline: 1px solid var(--line-colour);
}
.slim-search-input .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}
.slim-search-input .icon.search-icon {
  left: 8px;
}
.slim-search-input .icon.clear-icon {
  right: 8px;
}

.slim-textarea-container {
  display: flex;
}
.slim-textarea-container.single-line {
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
}
.slim-textarea-container.multi-line {
  flex-direction: column;
  gap: 8px;
}
.slim-textarea-container label {
  font-size: 12px;
}

.slim-textarea {
  border: 1px solid var(--tertiary-200);
  font-size: 12px;
  padding: 4px 8px;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}
.slim-textarea:focus {
  outline: none;
  border: 1px solid var(--tertiary-300);
}
.slim-textarea.disabled, .slim-textarea.read-only {
  background: var(--tertiary-200);
  color: var(--tertiary-800);
  resize: none;
}
.slim-textarea.enabled {
  background: var(--tertiary-50);
  color: var(--tertiary-800);
}
.slim-textarea::placeholder {
  color: var(--tertiary-400);
}
.slim-textarea.disabled::placeholder, .slim-textarea.read-only::placeholder {
  color: var(--tertiary-600);
}

.tag {
  border-radius: 24px;
  min-width: 56px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tag.tag-sm {
  min-height: 24px;
  padding: 3px 6px;
  font-size: 0.75rem;
}
.tag.tag-md {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 0.875rem;
}
.tag.tag-lg {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 1rem;
}
.tag {
  --bg: transparent;
  --text: var(--text-primary);
  --bg-hover: transparent;
  --bg-active: transparent;
  --focus-ring: var(--primary-500);
  color: var(--text);
  text-decoration: none;
  background-color: var(--bg);
  border: 2px solid transparent;
}
.tag.clickable:hover {
  border-color: var(--info-500);
  cursor: pointer;
}
.tag.clickable:active {
  border-color: var(--tertiary-700);
}
.tag.clickable:focus {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
  outline: none;
}
.tag:disabled, .tag.disabled {
  cursor: not-allowed;
  pointer-events: none;
  --bg: var(--disabled-bg) !important;
  --text: var(--disabled-text) !important;
  --outline: var(--disabled-text) !important;
}
.tag:disabled.cb-muted, .tag.disabled.cb-muted {
  --bg: var(--disabled-bg-muted) !important;
}
.tag.bg-hover:hover {
  background-color: var(--bg-hover);
  border-color: transparent;
}

.text-decoration-none {
  text-decoration: none;
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-xs {
  font-size: var(--typography-xs);
}

.text-sm {
  font-size: var(--typography-sm);
}

.text-md {
  font-size: var(--typography-md);
}

.text-lg {
  font-size: var(--typography-lg);
}

.text-xl {
  font-size: var(--typography-xl);
}

.text-xxl {
  font-size: var(--typography-xxl);
}

.text-xxxl {
  font-size: var(--typography-xxxl);
}

.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

/* stylelint-disable no-descending-specificity, declaration-block-no-shorthand-property-overrides */
.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow::before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow::before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow::before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow::before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow::before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}

.tippy-box[data-animation=shift-toward][data-state=hidden] {
  opacity: 0;
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top] {
  transform: translateY(-10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom] {
  transform: translateY(10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left] {
  transform: translateX(-10px);
}

.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right] {
  transform: translateX(10px);
}

.cb-tooltip {
  --tooltip-button-color: var(--tertiary-solid-bg);
  --tooltip-button-hover-color: var(--tertiary-solid-bg-hover);
  background: var(--bg);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1882352941);
}
.cb-tooltip .tippy-arrow {
  color: var(--bg);
}
.cb-tooltip .tippy-content {
  color: var(--text);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}
.cb-tooltip .tippy-content .tooltip-body {
  padding: 8px;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close {
  padding: 0;
  margin-left: auto;
  background-color: transparent;
  border-color: transparent;
  width: unset;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close:hover {
  background-color: transparent;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading .tooltip-close::before {
  animation: none;
  margin-right: 0;
  margin: 0;
  font-size: 0.75rem;
}
.cb-tooltip .tippy-content .tooltip-body .tooltip__heading + .body-text {
  margin-top: 8px;
}
.cb-tooltip .tippy-content .tooltip-body .heading-text {
  font-weight: bold;
  margin: 0;
  font-size: 0.875rem;
}
.cb-tooltip .tippy-content .tooltip-body .body-text {
  font-size: 0.75rem;
  margin: 0;
}
.cb-tooltip .tippy-content .tooltip-body .body-text img {
  margin-top: 16px;
}
.cb-tooltip .tippy-content .tooltip-body .btn-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 0;
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .trigger-joyride-step {
  background: var(--tooltip-button-color);
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .trigger-joyride-step:hover {
  background: var(--tooltip-button-hover-color);
}
.cb-tooltip .tippy-content .tooltip-body .btn-container .skip-joyride:hover {
  background: var(--tooltip-button-hover-color);
}
.cb-tooltip.tooltip-sm .tippy-content .tooltip-body, .cb-tooltip.context-menu .tippy-content .tooltip-body {
  padding: 0;
}
.cb-tooltip.context-menu .tippy-content {
  padding: 0;
}
.cb-tooltip.context-menu .tippy-content .context-menu-item:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.cb-tooltip.context-menu .tippy-content .context-menu-item:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.flex-row,
.flex-column {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.position-relative {
  position: relative;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-space-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-flex-start {
  align-items: flex-start;
}

.align-items-flex-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.gap-10 {
  gap: 10px;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.pre-wrap {
  white-space: pre-wrap;
}

.text-nowrap {
  text-wrap: nowrap;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.center-content {
  display: grid;
  place-items: center;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-minus-1 {
  z-index: -1;
}

.gap-xxs {
  gap: var(--spacing-xxs);
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* align-items */
.ai-normal {
  align-items: normal;
}

.ai-stretch {
  align-items: stretch;
}

.ai-center {
  align-items: center;
}

.ai-start {
  align-items: start;
}

.ai-end {
  align-items: end;
}

.ai-flex-start {
  align-items: flex-start;
}

.ai-flex-end {
  align-items: flex-end;
}

.ai-self-start {
  align-items: self-start;
}

.ai-self-end {
  align-items: self-end;
}

.ai-baseline {
  align-items: baseline;
}

.ai-first-baseline {
  align-items: first baseline;
}

.ai-last-baseline {
  align-items: last baseline;
}

.ai-safe-center {
  align-items: safe center;
}

.ai-unsafe-center {
  align-items: unsafe center;
}

.ai-inherit {
  align-items: inherit;
}

.ai-initial {
  align-items: initial;
}

.ai-unset {
  align-items: unset;
}

.ai-revert {
  align-items: revert;
}

.ai-revert-layer {
  align-items: revert-layer;
}

/* align-self */
.as-normal {
  align-self: normal;
}

.as-stretch {
  align-self: stretch;
}

.as-center {
  align-self: center;
}

.as-start {
  align-self: start;
}

.as-end {
  align-self: end;
}

.as-flex-start {
  align-self: flex-start;
}

.as-flex-end {
  align-self: flex-end;
}

.as-self-start {
  align-self: self-start;
}

.as-self-end {
  align-self: self-end;
}

.as-baseline {
  align-self: baseline;
}

.as-first-baseline {
  align-self: first baseline;
}

.as-last-baseline {
  align-self: last baseline;
}

.as-safe-center {
  align-self: safe center;
}

.as-unsafe-center {
  align-self: unsafe center;
}

.as-inherit {
  align-self: inherit;
}

.as-initial {
  align-self: initial;
}

.as-unset {
  align-self: unset;
}

.as-revert {
  align-self: revert;
}

.as-revert-layer {
  align-self: revert-layer;
}

/* align-content */
.ac-normal {
  align-content: normal;
}

.ac-center {
  align-content: center;
}

.ac-start {
  align-content: start;
}

.ac-end {
  align-content: end;
}

.ac-flex-start {
  align-content: flex-start;
}

.ac-flex-end {
  align-content: flex-end;
}

.ac-space-between {
  align-content: space-between;
}

.ac-space-around {
  align-content: space-around;
}

.ac-space-evenly {
  align-content: space-evenly;
}

.ac-stretch {
  align-content: stretch;
}

.ac-baseline {
  align-content: baseline;
}

.ac-first-baseline {
  align-content: first baseline;
}

.ac-last-baseline {
  align-content: last baseline;
}

.ac-safe-center {
  align-content: safe center;
}

.ac-unsafe-center {
  align-content: unsafe center;
}

.ac-inherit {
  align-content: inherit;
}

.ac-initial {
  align-content: initial;
}

.ac-unset {
  align-content: unset;
}

.ac-revert {
  align-content: revert;
}

.ac-revert-layer {
  align-content: revert-layer;
}

/* justify-items (mostly for CSS Grid but allow for completeness) */
.ji-normal {
  justify-items: normal;
}

.ji-stretch {
  justify-items: stretch;
}

.ji-center {
  justify-items: center;
}

.ji-start {
  justify-items: start;
}

.ji-end {
  justify-items: end;
}

.ji-flex-start {
  justify-items: flex-start;
}

.ji-flex-end {
  justify-items: flex-end;
}

.ji-self-start {
  justify-items: self-start;
}

.ji-self-end {
  justify-items: self-end;
}

.ji-left {
  justify-items: left;
}

.ji-right {
  justify-items: right;
}

.ji-legacy-left {
  justify-items: legacy left;
}

.ji-legacy-right {
  justify-items: legacy right;
}

.ji-legacy-center {
  justify-items: legacy center;
}

.ji-baseline {
  justify-items: baseline;
}

.ji-first-baseline {
  justify-items: first baseline;
}

.ji-last-baseline {
  justify-items: last baseline;
}

.ji-safe-center {
  justify-items: safe center;
}

.ji-unsafe-center {
  justify-items: unsafe center;
}

.ji-inherit {
  justify-items: inherit;
}

.ji-initial {
  justify-items: initial;
}

.ji-unset {
  justify-items: unset;
}

.ji-revert {
  justify-items: revert;
}

.ji-revert-layer {
  justify-items: revert-layer;
}

/* justify-content */
.jc-normal {
  justify-content: normal;
}

.jc-center {
  justify-content: center;
}

.jc-start {
  justify-content: start;
}

.jc-end {
  justify-content: end;
}

.jc-flex-start {
  justify-content: flex-start;
}

.jc-flex-end {
  justify-content: flex-end;
}

.jc-left {
  justify-content: left;
}

.jc-right {
  justify-content: right;
}

.jc-space-between {
  justify-content: space-between;
}

.jc-space-around {
  justify-content: space-around;
}

.jc-space-evenly {
  justify-content: space-evenly;
}

.jc-stretch {
  justify-content: stretch;
}

.jc-safe-center {
  justify-content: safe center;
}

.jc-unsafe-center {
  justify-content: unsafe center;
}

.jc-inherit {
  justify-content: inherit;
}

.jc-initial {
  justify-content: initial;
}

.jc-unset {
  justify-content: unset;
}

.jc-revert {
  justify-content: revert;
}

.jc-revert-layer {
  justify-content: revert-layer;
}

/* padding */
.p-xxs {
  padding: var(--spacing-xxs);
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

/* margins */
.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.mx-xs {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

.mx-sm {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

.mx-md {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}

.mx-lg {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}

.mx-xl {
  margin-left: var(--spacing-xl);
  margin-right: var(--spacing-xl);
}

.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.m-xs {
  margin: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

/* font-sizes */
.fs-xs {
  font-size: var(--typography-xs);
}

.fs-sm {
  font-size: var(--typography-sm);
}

.fs-md {
  font-size: var(--typography-md);
}

.fs-lg {
  font-size: var(--typography-lg);
}

.fs-xl {
  font-size: var(--typography-xl);
}

.fs-xxl {
  font-size: var(--typography-xxl);
}

.fs-xxxl {
  font-size: var(--typography-xxxl);
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.w-50 {
  width: 50%;
}

.h-50 {
  height: 50%;
}

.c-primary {
  color: var(--primary-500);
}

.c-secondary {
  color: var(--secondary-500);
}

.c-tertiary {
  color: var(--tertiary-500);
}

.virtual-scroll {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 100%;
  max-height: 100%;
}.header-bar {
  position: sticky;
  top: 0;
  min-height: 40px;
  width: 100%;
  z-index: 1;
  background: var(--bg-secondary);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-colour-light);
}
.header-bar .center-section {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%) translateY(-50%);
}
.header-bar .left-section {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.header-bar .right-section {
  display: flex;
}

.organisation-switcher {
  flex-grow: 1;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.organisation-switcher .search-input {
  margin-bottom: var(--spacing-sm);
}
.organisation-switcher .scrolling-container {
  overflow-y: auto;
}
.organisation-switcher .scrolling-container .orgs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.organisation-switcher .gradient-highlight-btn {
  background: var(--bg-primary);
  text-align: left;
}
.organisation-switcher .gradient-highlight-btn.selected {
  background: var(--bg-primary);
}

.page {
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-flow: row nowrap;
  max-width: 100vw;
  min-height: 100vh;
  width: 100%;
}
@media (max-width: 768px) {
  .page {
    flex-direction: column;
  }
}

.page-main {
  flex-grow: 1;
  z-index: 0;
  background: transparent;
  flex-basis: 100%;
}
@media (max-width: 768px) {
  .page-main {
    max-width: 100vw;
  }
}

.page-nav {
  background-color: var(--bg-primary);
  border-right: 1px solid var(--line-colour-light);
}
@media (max-width: 1024px) {
  .page-nav {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

.page-content-scroll-container {
  overflow-y: auto;
}

.content-container {
  padding: 0;
}
.content-container.extruded {
  background: var(--bg-secondary);
  padding: var(--spacing-xxl);
}

.page-wrapper {
  height: 100%;
  max-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-title {
  font-size: calc(var(--typography-lg) * 2);
  color: var(--text-primary);
  font-weight: bold;
  margin: 0 0 var(--spacing-lg) 0;
}

.page-subtitle {
  font-size: var(--typography-lg);
  color: var(--text-secondary);
  font-weight: bold;
  margin: 0 0 var(--spacing-lg) 0;
}

.page-flex-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.page-flex-row.x-center {
  justify-content: center;
}
.page-flex-row.y-center {
  align-items: center;
}

.page-content {
  width: 100%;
  max-width: var(--breakpoint-lg);
  padding-top: calc(var(--spacing-xxl) * 2);
  padding-bottom: calc(var(--spacing-xxl) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-lg);
}
.page-content.no-header-bar {
  margin-top: var(--sizing-md);
}
@media (max-width: 1600px) {
  .page-content {
    max-width: var(--breakpoint-md);
  }
}
@media (max-width: 1200px) {
  .page-content {
    padding: calc(var(--spacing-xxl) * 2);
  }
}
@media (max-width: 1024px) {
  .page-content {
    padding: var(--spacing-xxl);
  }
}
@media (max-width: 768px) {
  .page-content {
    padding: var(--spacing-xl);
  }
}

.input-background {
  margin-top: var(--spacing-md);
  background: var(--bg-secondary);
  padding: var(--spacing-md);
}
.input-background h3 {
  margin-top: 0;
  font-family: var(--font-family-heading);
}
.input-background .code-block textarea {
  font-family: var(--font-family-monospace);
  font-size: var(--typography-sm);
}

.side-menu-item {
  height: var(--sizing-md);
  width: var(--sizing-md);
  display: flex;
  flex-direction: column;
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  user-select: none;
}
.side-menu-item.disabled {
  pointer-events: none;
}
.side-menu-item p {
  margin: 6px 0 0;
  font-size: var(--typography-xs);
}
.side-menu-item.selected {
  background-color: var(--primary-muted-bg);
  color: var(--primary-muted-text-icon);
}
.side-menu-item:hover {
  background-color: var(--primary-muted-bg);
  color: var(--primary-muted-text-icon);
  cursor: pointer;
}

.theme-dark .side-menu-item.selected {
  background-color: var(--grey-800);
}
.theme-dark .side-menu-item:hover {
  background-color: var(--grey-800);
}

.crud-page {
  display: contents;
}
.crud-page .create-button {
  height: auto;
}
.crud-page .crud-search-bar {
  max-width: var(--breakpoint-xxs);
}
.crud-page .actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: stretch;
  justify-content: space-between;
}
.crud-page .pagination {
  width: 100%;
  margin-top: var(--spacing-sm);
  font-size: var(--typography-sm);
  text-align: center;
}.centered-page .wrapper {
  min-height: 100%;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.centered-page .column {
  flex-grow: 1;
  width: 100%;
  max-width: var(--breakpoint-md);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.centered-page .title {
  font-size: var(--typography-xl);
  margin: 0 0 var(--spacing-md) 0;
}
.centered-page .subtitle {
  font-size: calc(var(--typography-xl) * 3);
  margin: 0 0 var(--spacing-xl) 0;
  font-weight: bold;
}

.footer {
  text-align: center;
}
.footer .logo {
  width: 100%;
  max-width: var(--sizing-xl);
}
.footer .small {
  font-size: var(--typography-sm);
}
.footer a {
  color: var(--palette-shade1);
  margin: 0 var(--spacing-sm);
}

.error-page .error-type {
  font-size: var(--typography-lg);
  color: var(--error-500);
}
.error-page .error-description {
  color: var(--error-500);
}

.home-page .button-group {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.home-page .button-group .icon {
  font-size: var(--typography-xl);
  margin-bottom: var(--spacing-md);
}
.home-page .button-group > button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.home-page .button-group > button[title="App Studio"] {
  color: white;
}
.home-page .button-group > button {
  flex-grow: 0;
  flex-shrink: 0;
  transform: scale(1);
  width: var(--sizing-xl);
  height: var(--sizing-xl);
  margin: var(--spacing-md);
  font-size: var(--typography-lg);
  transition: all 200ms var(--animation-productive);
}
.home-page .button-group > button:hover {
  transform: scale(1.05);
}

.login-page .login-form > button {
  width: 100%;
  margin: var(--spacing-xl) 0;
}

.logout-page .loading-spinner {
  height: 100%;
  flex-grow: 1;
}

.setup-mfa-modal .qr-code {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
.setup-mfa-modal .step-1 li {
  margin: var(--spacing-sm) 0;
}
.setup-mfa-modal .step-2 .PinInput {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
}* {
	box-sizing: border-box;
}

:where(html, body, #root) {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--font-family);

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		padding: 0;
		font-family: var(--font-family-heading);
	}

	h5,
	h6 {
		color: var(--text-secondary);
		text-transform: uppercase;
	}

	p {
		margin: 0;
		padding: 0;
	}
}/* This CID is from the EvenGrid component, which is used as the base for ButtonGroup. */
.button-group[data-cid='36f05110-0ebf-5ec0-8f30-3f0f1c88421b'] {
	margin: var(--spacing-lg) 0;
	gap: var(--spacing-xs);
	width: 100%;
}
.even-grid[data-cid='36f05110-0ebf-5ec0-8f30-3f0f1c88421b'] {
	--count: 0;

	display: grid;

	&.horizontal {
		grid-template-columns: repeat(var(--count), 1fr);
	}

	&.vertical {
		grid-template-rows: repeat(var(--count), 1fr);
	}
}
.new-theme-toggle {
	aspect-ratio: 66 / 30;
	border-radius: 9999px;
	overflow: hidden;
	cursor: pointer;

	.wmapp-switch {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: relative;

		.sun,
		.moon {
			pointer-events: none;
			display: block;
			position: absolute;
			border: none;
			width: 36.36%;
			height: 80%;
			transform: translate3d(0, 0, 0) rotate(0);
			transition:
				transform 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0s,
				opacity 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0s;
			top: 10%;
			left: 4.55%;
		}

		.sun {
			opacity: 1;

			.st0 {
				fill: #fba441;
			}
		}

		.moon {
			opacity: 0;

			.st0 {
				fill: #f4dc3e;
			}
		}

		.wmapp-switch-switch {
			width: 100%;
			height: 100%;
			margin: 0;
			border: 0;
			background: #b7e3ff;
			overflow: hidden;
			transition: all 0.3s cubic-bezier(0, 0, 0.44, 0.96) 0s;

			.stars,
			.clouds {
				display: block;
				height: 80%;
				position: absolute;
				bottom: 10%;
				border: none;
				border-radius: 0;
				transition: all 0.6s cubic-bezier(0, 0, 0.44, 0.96) 0.1s;
			}

			.clouds {
				width: 39.39%;
				background-size: 39.39%;
				right: 10.61%;
				opacity: 1;

				.st0 {
					fill: #fff;
				}
			}

			.stars {
				width: 59.09%;
				background-size: 45.45%;
				right: 106.06%;
				opacity: 0;

				.st0 {
					fill: #f4dd3f;
				}
			}
		}

		&.dark {
			.sun {
				transform: translate3d(150%, 0, 0) rotate(180deg);
				opacity: 0;
			}

			.moon {
				transform: translate3d(150%, 0, 0) rotate(180deg);
				opacity: 1;
			}

			.wmapp-switch-switch {
				background: #000;

				.clouds {
					right: -9.09%;
					opacity: 0;
				}

				.stars {
					right: 30.3%;
					opacity: 1;
				}
			}
		}
	}
}.ErrorMessage {
	--base-size: var(--typography-md);

	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	font-size: var(--base-size);

	&.column {
		flex-direction: column;
	}

	&.row {
		flex-direction: row;
	}

	&.grid {
		display: grid;
		grid-template:
			'icon title' auto
			'message message' auto / auto 1fr;
		gap: var(--spacing-xs) var(--spacing-sm);
	}

	&.overlay {
		position: absolute;
	}

	> .icon {
		grid-area: icon;
		color: var(--text-error);
		font-size: calc(var(--base-size) * 3);
	}

	> .title {
		grid-area: title;
		font-size: calc(var(--base-size) * 1.5);
		margin: 0;
	}

	> .message {
		grid-area: message;
		text-align: center;
	}

	.codeblock {
		width: calc(100% - var(--spacing-xl));
		max-height: 70vh;
	}
}
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #24292e;
  background: #ffffff
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}.codeblock {
	position: relative;
	margin: 0;
	background: var(--bg-secondary);
	color: var(--text-primary);

	> .scroller {
		overflow: auto;
		width: 100%;
		height: 100%;
		padding: var(--spacing-lg);

		> code {
			font-size: var(--typography-sm);
			font-family: var(--font-family-monospace);

			&.hljs {
				background: transparent; /* Override hljs's default background */
				color: inherit; /* Inherit text color from .codeblock */
			}

			> span[data-line-number] {
				display: block;

				&::before {
					content: attr(data-line-number);
					margin-right: 16px;
					width: 1rem;
					text-align: right;
					display: inline-block;
					border-right: 1px solid var(--line-colour-light);
					padding-right: var(--spacing-sm);
				}
			}
		}

		/* ${(props) => props.theme.scrollbars.skinny} */
	}

	.copy-to-clipboard {
		margin: 0 0 0 auto;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
	}
}
.inline-spinner__inline-container {
	height: 100%;
}

.inline-spinner__inline-container--overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(255 255 255 / 70%);
	z-index: 700;
}

.inline-spinner__spinner-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.inline-spinner__spinner-container svg {
	animation:
		inline-spinner-scale 2s ease-in-out infinite,
		inline-spinner-spin 1.4s linear infinite;
}

@keyframes inline-spinner-scale {
	0% {
		scale: 1;
		opacity: 0.7;
	}

	50% {
		scale: 1.2;
		opacity: 1;
	}

	100% {
		scale: 1;
		opacity: 0.7;
	}
}

@keyframes inline-spinner-spin {
	100% {
		transform: rotate(360deg);
	}
}
/* stylelint-disable no-descending-specificity */
.form-input-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.form-input-wrapper .label-wrapper,
.form-input-label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.form-input-wrapper .label,
.form-input-label-row .label,
.form-input-label {
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.form-input-wrapper .required-marker,
.form-input-label-row .required-marker,
.form-input-required-marker {
	color: var(--error-500);
	font-weight: 400;
}

.form-input-wrapper .label-actions,
.form-input-label-row .label-actions,
.form-input-label-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	margin-left: auto;
	cursor: pointer;
}

.form-input-wrapper .bottom-bar,
.form-input-bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
	min-height: 1.25rem;
}

.form-input-wrapper .helper-text-container,
.form-input-bottom-bar .helper-text-container,
.form-input-helper-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.form-input-wrapper .helper-text--error,
.form-input-bottom-bar .helper-text--error,
.form-input-helper-text--error {
	color: var(--error-500);
}

.form-input-wrapper .helper-text,
.form-input-bottom-bar .helper-text,
.form-input-helper-text {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--text-secondary);
	flex: 1;
}

.form-input-wrapper .link-slot,
.form-input-bottom-bar .link-slot,
.form-input-link {
	font-size: 0.75rem;
	line-height: 1rem;
	text-decoration: none;
	color: var(--primary-500);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	flex-shrink: 0;
	margin-left: auto;
}

.form-input-wrapper .link-slot:hover,
.form-input-bottom-bar .link-slot:hover,
.form-input-link:hover {
	text-decoration: underline;
}

.form-input-wrapper .link-slot:focus,
.form-input-bottom-bar .link-slot:focus,
.form-input-link:focus {
	outline: 2px solid var(--info-500);
	outline-offset: 2px;
}

.form-input-wrapper.valid .helper-text:not(.helper-text--error),
.form-input-wrapper.valid .form-input-helper-text:not(.form-input-helper-text--error),
.form-input-bottom-bar.valid .helper-text:not(.helper-text--error),
.form-input-bottom-bar.valid .form-input-helper-text:not(.form-input-helper-text--error) {
	color: var(--success-500);
}

.form-input-wrapper.invalid .helper-text,
.form-input-wrapper.invalid .form-input-helper-text,
.form-input-bottom-bar.invalid .helper-text,
.form-input-bottom-bar.invalid .form-input-helper-text {
	color: var(--error-500);
}
/* stylelint-disable no-descending-specificity */
.simple-input-wrapper {
	--input-border-radius: 4px;
	--input-border-width: 1px;
	--input-border-color: var(--line-colour);
	--input-focus-color: var(--info-300);
	--input-text-color: var(--text-secondary);
	--input-placeholder-color: var(--text-placeholder);
	--input-icon-color: var(--text-secondary);
	--input-background-color: var(--textbox-bg-default);
	--input-padding-block: var(--spacing-xs);
	--input-padding-inline: var(--spacing-sm);
	--input-padding-inline-start: var(--input-padding-inline);
	--input-padding-inline-end: var(--input-padding-inline);
	--input-font-size: var(--typography-md);
	--icon-size: 16px;
}

.simple-input-wrapper.simple-input--size-md {
	--input-padding-block: var(--spacing-xs);
	--input-padding-inline: var(--spacing-sm);
	--input-font-size: var(--typography-md);
}

.simple-input-wrapper.simple-input--size-sm {
	--input-padding-block: 5.1px;
	--input-padding-inline: var(--spacing-sm);
	--input-font-size: var(--typography-sm);
}

/* Validation state styling for the wrapper */
.simple-input-wrapper.invalid {
	--input-border-color: var(--line-error);
}

.simple-input-wrapper.valid {
	--input-border-color: var(--line-success);
}

.simple-input-wrapper.disabled,
.simple-input-wrapper.read-only {
	--input-border-color: var(--line-disabled);
	--input-placeholder-color: var(--disabled-text);
	--input-icon-color: var(--disabled-text);
	--input-background-color: var(--textbox-bg-disabled);
}

.simple-input-wrapper.read-only {
	.simple-input__field:focus-within {
		border-color: var(--input-focus-color);
		box-shadow: inset 0 0 0 0.5px var(--input-focus-color);

		--input-background-color: var(--textbox-bg-disabled);
	}
}

.simple-input-wrapper.disabled {
	--input-text-color: var(--disabled-text);
}

.simple-input__field {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	border-radius: var(--input-border-radius);
	border: var(--input-border-width) solid var(--input-border-color);
	background-color: var(--input-background-color);
	transition:
		border-color 160ms var(--animation-productive),
		box-shadow 160ms var(--animation-productive);
	box-shadow: none;
}

.simple-input__field:focus-within {
	border-color: var(--input-focus-color);
	box-shadow: inset 0 0 0 0.5px var(--input-focus-color);

	--input-background-color: var(--textbox-bg-active);
}

.simple-input__field.simple-input__field--has-icon {
	--input-padding-inline-start: var(--spacing-xs);
}

.simple-input__field.simple-input__field--has-trailing {
	--input-padding-inline-end: var(--spacing-xs);
}

.simple-input__leading-icon {
	margin-left: var(--input-padding-inline-start);
	color: var(--input-icon-color);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.simple-input__input-element {
	flex: 1 1 auto;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--input-text-color);
	font-size: var(--input-font-size);
	padding: var(--input-padding-block) var(--input-padding-inline-end) var(--input-padding-block)
		var(--input-padding-inline-start);
	min-width: 0;
}

.simple-input__input-element::placeholder {
	color: var(--input-placeholder-color);
}

.simple-input__trailing-slot {
	margin-right: var(--input-padding-inline-end);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
}
/* stylelint-disable no-descending-specificity */
.input__action-button {
	background: none;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--input-icon-color);
	cursor: pointer;
	border-radius: 4px;
	transition:
		color 160ms var(--animation-productive),
		background-color 160ms var(--animation-productive);
}

.input__action-button:hover:not(:disabled) {
	color: var(--input-focus-color);
}

.input__action-button:focus-visible {
	outline: 2px solid var(--input-focus-color);
	outline-offset: 2px;
}

.input__action-button--disabled,
.input__action-button:disabled {
	cursor: not-allowed;
	color: var(--disabled-text);
}

.input__action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--icon-size);
	width: var(--icon-size);
	height: var(--icon-size);
}
/* stylelint-disable no-descending-specificity */
.segmented-control {
	display: block;
	position: relative;
	line-height: 1;

	/* Size variants */
	&.segmented-control-size-sm {
		.segment {
			padding: 7px 16px;
			font-size: 12px;
		}
	}

	&.segmented-control-size-md {
		.segment {
			padding: 13px 16px;
			font-size: 12px;
		}
	}

	&.segmented-control-size-lg {
		.segment {
			padding: 11px 20px;
			font-size: 16px;
		}
	}

	.segment {
		flex: 1;
		text-align: center;
		background: var(--bg-tertiary);
		cursor: pointer;
		border: 1px solid transparent;
		border-inline-width: 0;
		position: relative;
		color: var(--text-primary);

		&:first-child {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			border-left-width: 1px;
		}

		&:last-child {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			border-right-width: 1px;
		}

		&:focus {
			outline: none;
		}
	}

	.underlay {
		display: flex;

		.segment {
			border-color: var(--bg-secondary);

			span {
				visibility: hidden;
			}

			+ .segment {
				&::before {
					content: '';
					display: block;
					width: 1px;
					height: 70%;
					background: var(--tertiary-200);
					position: absolute;
					top: 15%;
					left: 0;
					transition: opacity 0.15s ease;
					opacity: 1;
				}
			}

			&.selected + .segment {
				&::before {
					opacity: 0;
				}
			}
		}
	}

	.overlay {
		display: flex;
		position: absolute;
		inset: 0;

		.segment {
			background: transparent;

			span {
				visibility: visible;
			}
		}
	}

	.indicator {
		background-color: var(--bg-secondary);
		border-radius: 4px;
		box-shadow:
			0 2px 4px color-mix(in srgb, var(--text-primary) 10%, transparent),
			0 0 1px color-mix(in srgb, var(--text-primary) 30%, transparent);
		position: absolute;
		top: 0;
		left: 0;
		transition:
			width 0.15s ease,
			transform 0.15s ease,
			height 0.15s ease;
	}
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] {
  display: grid;
  position: relative;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"].vertical {
  text-align: center;
  justify-items: center;
  grid-template-areas: "image" "name" "description";
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"].horizontal {
  text-align: left;
  grid-template: "image name" 1fr "image name" 1fr/auto 1fr;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"].horizontal.has-description {
  grid-template-areas: "image name" "image description";
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit {
  position: absolute;
  display: block;
  transform: scale(0.5);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.sm {
  display: none;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.lg {
  transform: scale(1);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit:hover {
  display: block;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.vertical.xs {
  margin-left: calc(-12px - var(--spacing-sm));
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.vertical.sm {
  margin-left: calc(-16px - var(--spacing-sm));
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.vertical.md {
  margin-left: calc(-24px - var(--spacing-sm));
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] button.edit.vertical.lg {
  margin-left: calc(-60px - var(--spacing-sm));
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img {
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  grid-area: image;
  opacity: 1;
  background: var(--tertiary-50);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.vertical {
  justify-self: center;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.horizontal {
  justify-self: end;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.loading {
  opacity: 0.3;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img:hover {
  box-shadow: 0 5px 15px var(--bg-tertiary);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img:active {
  outline: 2px solid var(--text-primary);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img:active.isLoading {
  outline: none;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img:hover ~ button.edit {
  display: block;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.xs {
  width: 24px;
  margin: var(--spacing-xxs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.sm {
  width: 32px;
  margin: var(--spacing-xs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.md {
  width: 48px;
  margin: var(--spacing-sm);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] > img.lg {
  width: 120px;
  margin: var(--spacing-md);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name {
  grid-area: name;
  font-weight: bold;
  max-width: 100%;
  align-self: center;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.has-description {
  align-self: end;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.xs {
  font-size: var(--typography-xs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.sm {
  font-size: var(--typography-sm);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.md {
  font-size: var(--typography-md);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.name.lg {
  font-size: var(--typography-lg);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description {
  grid-area: description;
  max-width: 100%;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description.xs {
  font-size: var(--typography-xs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description.sm {
  font-size: var(--typography-xs);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description.md {
  font-size: var(--typography-sm);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] span.description.lg {
  font-size: var(--typography-md);
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container {
  grid-area: image;
  justify-self: center;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container.xs {
  --size: calc(map.get($props, image) / 2);
  margin: calc(6px + var(--spacing-sm)) 0 0 0;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container.sm {
  --size: calc(map.get($props, image) / 2);
  margin: calc(8px + var(--spacing-sm)) 0 0 0;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container.md {
  --size: calc(map.get($props, image) / 2);
  margin: calc(12px + var(--spacing-sm)) 0 0 0;
}
.avatar[data-cid="0e6425d7-e38e-58ff-8728-498a0d3692ec"] .spinner-container.lg {
  --size: calc(map.get($props, image) / 2);
  margin: calc(30px + var(--spacing-sm)) 0 0 0;
}.truncate-span[data-cid='49fadebe-a29c-58eb-bf2e-e9da7e647fef'] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
.context-menu-container[data-cid="064183e3-a22d-5fac-bb77-67f27b5482f0"] {
  background-color: var(--bg-primary);
  box-shadow: 0 1px 3px var(--drop-shadow);
  border-radius: 4px;
  overflow: hidden;
}

.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9] {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-width: 150px;
  display: block;
  text-align: left;
  padding: 6px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-colour-light);
  font-size: var(--typography-md);
  text-decoration: none;
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].icon {
  gap: 8px;
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9]:hover {
  cursor: pointer;
  background: var(--bg-tertiary);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].disabled {
  pointer-events: none;
  opacity: 0.5;
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9]:last-child {
  border-bottom: none;
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].primary {
  background: var(--primary-muted-bg);
  color: var(--primary-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].primary:hover {
  background: var(--primary-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].secondary {
  background: var(--secondary-muted-bg);
  color: var(--secondary-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].secondary:hover {
  background: var(--secondary-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].tertiary {
  background: var(--tertiary-muted-bg);
  color: var(--tertiary-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].tertiary:hover {
  background: var(--tertiary-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].info {
  background: var(--info-muted-bg);
  color: var(--info-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].info:hover {
  background: var(--info-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].success {
  background: var(--success-muted-bg);
  color: var(--success-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].success:hover {
  background: var(--success-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].caution {
  background: var(--caution-muted-bg);
  color: var(--caution-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].caution:hover {
  background: var(--caution-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].warning {
  background: var(--warning-muted-bg);
  color: var(--warning-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].warning:hover {
  background: var(--warning-muted-bg-hover);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].error {
  background: var(--error-muted-bg);
  color: var(--error-muted-text-icon);
}
.context-menu-item[data-cid=ecea7626-492f-54af-b615-aa98aa80b3b9].error:hover {
  background: var(--error-muted-bg-hover);
}.toast-container {
	position: fixed;
	bottom: 0;
	right: 0;
	display: grid;
	z-index: 900;
	gap: var(--spacing-md);
	margin: var(--spacing-md);
}@keyframes modal-bg-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes modal-slide-in-bottom {
  0% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0);
  }
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] {
  --modal-spacing: var(--spacing-md);
  position: fixed;
  z-index: 600;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  top: 0;
  left: 0;
  background-color: rgba(21, 21, 23, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: modal-bg-fade-in 0.5s var(--animation-entrance-expressive) 0s 1;
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
  --modal-max-width: 700px;
  --modal-width: auto;
  position: relative;
  background: var(--bg-secondary);
  opacity: 1;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.38);
  animation: modal-slide-in-bottom 0.3s var(--animation-entrance-expressive) 0s 1;
  max-height: 100vh;
  overflow-y: auto;
  max-width: min(var(--modal-max-width), 100vw);
  width: fit-content;
  min-width: var(--modal-width);
}
@media (max-width: 768px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 95vw);
  }
}
@media (max-width: 640px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 100vw);
    width: 100vw;
  }
}
@media (max-height: 768px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 80vw);
  }
}
@media (max-height: 768px) and (width <= calc(768px + 100px)) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 90vw);
  }
}
@media (max-height: 768px) and (max-width: 768px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 95vw);
  }
}
@media (max-height: 768px) and (max-width: 1024px) {
  .modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-inner-wrapper {
    max-width: min(var(--modal-max-width), 100vw);
  }
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal {
  max-height: 95vh;
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-content-wrapper {
  padding: 0 var(--modal-spacing);
  max-height: 100%;
  overflow-y: auto;
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-content {
  background: var(--bg-primary);
  padding: var(--modal-spacing);
  min-width: min(300px, 100dvw);
  color: var(--text-primary);
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-content > *:first-child {
  margin-top: 0;
  padding-top: 0;
}
.modal-outer-wrapper[data-cid=ccc44423-e5e7-532b-869d-4cfd5a2f6b66] .modal-content > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}.modal-header[data-cid='ece2034f-17d1-49c4-82a2-021a5ea15cbe'] {
	padding: var(--modal-spacing);
	color: var(--text-primary);

	/* The container will use flex gap to create space between the header and body, so we remove the bottom padding from the header. */
	padding-bottom: 0;

	.modal-titles {
		width: 100%;
	}

	.modal-title {
		margin: 0;
		padding: 0;
		font-family: var(--font-family-heading);
		font-size: var(--typography-xxl);
		font-weight: bold;
	}

	.modal-subtitle {
		margin: 0;
		padding: 0;
		font-family: var(--font-family);
		font-size: var(--typography-lg);
		font-weight: normal;
	}

	.modal-close-button {
		min-height: auto;
		padding: var(--spacing-xxs);

		/* The negative margins are to offset the padding, so that the clickable area of the button extends to the edge of the modal. */
		margin-top: calc(var(--spacing-xxs) * -1);
		margin-right: calc(var(--spacing-xxs) * -1);
	}
}
.v-stack,
.h-stack {
  display: flex;
}

.v-stack {
  flex-direction: column;
}.modal-actions[data-cid='543da41b-19fe-4db8-9f36-b8e105584b70'] {
	padding: var(--modal-spacing);
	background: var(--bg-tertiary);
}
.modal-footer[data-cid='2dd7750a-c88a-4f37-ad37-db70d8b9a465'] {
	padding: 0 var(--modal-spacing);
}
.form {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  align-self: center;
  max-width: var(--breakpoint-xxxs);
}
.link {
	color: var(--link-default);
	cursor: pointer;
	text-decoration: none;
	font-family: var(--font-family);

	&:visited {
		color: var(--link-visited);
	}

	&:hover {
		text-decoration: underline;
	}

	&:focus {
		box-shadow: inset 0 0 0 2px var(--link-default);
	}
}.pin-input {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-md);

  input {
    text-align: center;
    padding: 0;
  }

  &.pin-input-lg input {
    width: 2em;
    height: 2em;
    font-size: 1.5em;
    margin: 0 0.5em;
  }

  &.pin-input-md input {
    width: 1.8em;
    height: 2em;
    font-size: 1.25em;
    line-height: 1.5em;
    margin: 0 0.3em;
  }

  &.pin-input-sm input {
    width: 1.5em;
    height: 1.5em;
    font-size: 1em;
    line-height: 1.5em;
    margin: 0 0.2em;
  }
}
/* stylelint-disable no-descending-specificity */
.select-wrapper {
	/* Scoped styles for the Select component. Uses design tokens from the global token files.
     These tokens are defined under .theme-light and .theme-dark so the component will respond
     to theme changes. */
	--input-border-radius: 4px;
	--input-border-width: 1px;
	--input-border-color: var(--line-colour);
	--input-focus-color: var(--info-300);
	--input-text-color: var(--text-secondary);
	--input-placeholder-color: var(--text-placeholder);
	--input-icon-color: var(--text-secondary);
	--input-background-color: var(--textbox-bg-default);
	--input-padding-block: var(--spacing-xs);
	--input-padding-inline: var(--spacing-sm);
	--input-padding-inline-start: var(--input-padding-inline);
	--input-padding-inline-end: var(--input-padding-inline);
	--input-font-size: var(--typography-md);
	--icon-size: 16px;

	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	width: calc(100% - 4px);
	margin-left: 2px;
	font-size: var(--input-font-size);
	color: var(--input-text-color);

	.control {
		box-sizing: border-box;
		position: relative;
		display: flex;
		width: 100%;
		align-items: center;
		border-radius: var(--input-border-radius);
		border: var(--input-border-width) solid var(--input-border-color);
		background-color: var(--input-background-color);
		transition:
			border-color 160ms var(--animation-productive),
			box-shadow 160ms var(--animation-productive);
		box-shadow: none;
		min-height: calc(var(--icon-size) + 2 * var(--input-padding-block));
		color: inherit;

		&:focus-visible {
			outline: none;
		}

		&.control--focused {
			border-color: var(--input-focus-color);
			box-shadow: inset 0 0 0 0.5px var(--input-focus-color);

			--input-background-color: var(--textbox-bg-active);
		}

		&.control--error {
			--input-border-color: var(--line-error);
		}

		&.disabled,
		&.read-only {
			--input-border-color: var(--line-disabled);
			--input-text-color: var(--disabled-text);
			--input-placeholder-color: var(--disabled-text);
			--input-icon-color: var(--disabled-text);
			--input-background-color: var(--textbox-bg-disabled);

			cursor: default;

			.selected-option {
				&:hover {
					cursor: auto;
				}
			}
		}

		&.read-only {
			.selected-option {
				color: var(--text-secondary);
			}
		}
	}

	.chevron-icon {
		&.up {
			transform: rotate(180deg);
		}
	}

	.selected-option {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		box-sizing: border-box;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		color: var(--input-text-color);
		gap: var(--spacing-xs);
		padding-block: var(--input-padding-block);
		padding-inline: var(--input-padding-inline-start) var(--input-padding-inline-end);
		min-height: calc(var(--icon-size) + 2 * var(--input-padding-block));
		font-size: inherit;

		&:hover {
			cursor: pointer;
		}

		.icon {
			font-size: var(--icon-size);
			color: var(--input-icon-color);
			flex: 0 0 auto;
		}
	}
}

.select-wrapper.size-xs {
	--input-padding-block: var(--spacing-xxs);
	--input-padding-inline: var(--spacing-xs);
	--input-font-size: var(--typography-sm);
	--icon-size: 14px;
}

.select-wrapper.size-sm {
	--input-padding-block: var(--spacing-xxs);
	--input-padding-inline: var(--spacing-xs);
	--input-font-size: var(--typography-sm);
}

.select-wrapper.size-lg {
	--input-padding-block: var(--spacing-sm);
	--input-padding-inline: var(--spacing-md);
	--input-font-size: var(--typography-lg);
	--icon-size: 20px;
}

/* Dropdown container used by the portal */
.select-options {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-secondary);
	margin-top: 2px;
	outline: none;
	max-height: 45vh;
	overflow: hidden auto;
	box-shadow: 0 0 8px 0 var(--drop-shadow);

	--option-padding-block: var(--input-padding-block, var(--spacing-xs));
	--option-padding-inline: var(--input-padding-inline, var(--spacing-sm));
	--option-font-size: var(--input-font-size, var(--typography-md));

	/* Scrollbar styling (WebKit) */
	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-track {
		background: var(--grey-medium);
	}

	&::-webkit-scrollbar-thumb {
		background: var(--text-primary);
		border-radius: 4px;
	}

	/* Firefox scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--grey-heavy) var(--grey-medium);
}

.select-option-container {
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	color: var(--text-primary);
	gap: var(--spacing-xxs);
	padding-block: var(--option-padding-block);
	padding-inline: var(--option-padding-inline);
	font-size: var(--option-font-size);
	line-height: 1.25;

	&.size-xs,
	&.size-sm {
		--option-padding-block: var(--spacing-xxs);
		--option-padding-inline: var(--spacing-xs);
		--option-font-size: var(--typography-sm);
	}

	&.size-lg {
		--option-padding-block: var(--spacing-sm);
		--option-padding-inline: var(--spacing-md);
		--option-font-size: var(--typography-lg);
	}

	&.selected {
		background: var(--info-50);
	}

	&.highlighted {
		background: var(--info-100);
	}

	&:hover {
		background: var(--info-100);
		cursor: pointer;
	}
}

.theme-dark {
	.select-option-container {
		&.selected {
			background: var(--info-800);
		}

		&.highlighted {
			background: var(--info-700);
		}

		&:hover {
			background: var(--info-700);
		}
	}
}

/* Search input used inside the selected-option when the select is searchable */
.select-search-input {
	width: 100%;
	border: none;
	outline: none;
	color: var(--text-primary);
	margin: 0;
	padding: 0;
	background: transparent;
	font: inherit; /* inherit typography from the wrapper */
}

/* Inline spinner inside the options area when loading */
.select-inline-spinner {
	margin: var(--spacing-xl);
	flex-grow: 1;
	place-self: center center;
}

/* Empty options placeholder when there are no options */
.select-empty-options {
	flex-grow: 1;
	text-align: center;
	font-style: italic;
	color: var(--text-tertiary);
}

/* Validation errors container shown under the control */
.select-validation-errors {
	margin-top: var(--spacing-xs);
	color: var(--error-500);
	font-size: var(--typography-sm);
}

/* Current option wrapper inside the control */
.select-current-option {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-xs);
	min-height: calc(var(--icon-size) + 2 * var(--input-padding-block));
}

.select-display {
	flex-grow: 1;
	max-width: calc(100% - var(--spacing-md));
	min-width: 0;
	color: inherit;
}
/* stylelint-disable no-descending-specificity */
.checkbox-container {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	.checkbox-content {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.checkbox-wrapper {
		position: relative;
		display: inline-block;
	}

	.checkbox-input {
		margin: 0;
		padding: 0;
		outline: none;
		appearance: none;
		cursor: pointer;
		border: 2px solid var(--line-colour);
		border-radius: 2px;
		background-color: transparent;
		position: relative;
		display: block;

		&:focus-visible:not(.checkbox-input-disabled) {
			outline: 2px solid var(--primary-500);
		}
	}

	.checkbox-input.checkbox-checked:not(.checkbox-input-disabled) {
		background-color: var(--secondary-solid-bg-hover);
		border-color: var(--secondary-solid-bg-hover);

		&:focus-visible {
			outline: 2px solid var(--primary-500);
		}
	}

	.checkbox-input.checkbox-indeterminate:not(.checkbox-input-disabled) {
		background-color: var(--secondary-solid-bg-hover);
		border-color: var(--secondary-solid-bg-hover);

		&:focus-visible {
			outline: 2px solid var(--primary-500);
		}
	}

	.checkbox-input.checkbox-input-disabled {
		border-color: var(--line-disabled);
		background-color: var(--disabled-bg);
		cursor: not-allowed;

		&.checkbox-checked,
		&.checkbox-indeterminate {
			background-color: #e8e8e8;
			border-color: #e8e8e8;
		}
	}

	.checkbox-input-disabled ~ .checkbox-icon .check-icon,
	.checkbox-input-disabled ~ .checkbox-icon .indeterminate-icon {
		color: var(--disabled-text);
	}

	.checkbox-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	.check-icon,
	.indeterminate-icon {
		color: var(--neutral-white);
	}

	.check-icon .material-symbols-rounded,
	.indeterminate-icon .material-symbols-rounded {
		font-variation-settings:
			'FILL' 1,
			'wght' 700,
			'GRAD' 0,
			'opsz' 24;
	}

	.checkbox-label {
		color: var(--text-primary);
		align-self: center;
		cursor: pointer;
		line-height: 1;
		user-select: none;
	}

	.checkbox-label.checkbox-label-disabled {
		color: var(--disabled-text);
		cursor: not-allowed;
	}

	.checkbox-label-actions {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.form-input-bottom-bar {
		margin-top: 0;
	}

	.checkbox-validation-errors {
		margin-top: var(--spacing-xs);
		color: var(--error-solid-text-icon);
		font-size: var(--typography-sm);
	}

	/* Size variants */
	&.checkbox-size-xs .checkbox-input {
		width: 12px;
		height: 12px;
	}

	&.checkbox-size-xs .checkbox-icon .material-symbols-rounded {
		font-size: 8px;
	}

	&.checkbox-size-sm .checkbox-input {
		width: 16px;
		height: 16px;
	}

	&.checkbox-size-sm .checkbox-icon .material-symbols-rounded {
		font-size: 12px;
	}

	&.checkbox-size-md .checkbox-input {
		width: 24px;
		height: 24px;
	}

	&.checkbox-size-md .checkbox-icon .material-symbols-rounded {
		font-size: 18px;
	}

	&.checkbox-size-lg .checkbox-input {
		width: 32px;
		height: 32px;
	}

	&.checkbox-size-lg .checkbox-icon .material-symbols-rounded {
		font-size: 24px;
	}

	/* Disabled state */
	&.checkbox-disabled .checkbox-wrapper {
		cursor: not-allowed;
	}

	&.checkbox-disabled .checkbox-label {
		cursor: not-allowed;
	}
}