.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-entranceProductive: cubic-bezier(0, 0, 0.27, 0.96);
  --animation-timing-entranceExpressive: cubic-bezier(0.05, 0.025, 0.26, 0.96);
  --animation-timing-exitProductive: cubic-bezier(0.2, 0, 1, 0.85);
  --animation-timing-exitExpressive: 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 0px 0px 0px 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: 0px 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: 0px 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: 0px solid var(--secondary-500);
  background: var(--tertiary-800);
  top: 0;
  right: 0;
  left: 0;
  bottom: 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: #ffffff;
  --neutral-black: #000000;
  /* 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: #00000033;
  --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: #ffffff66;
  --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(--success-300);
  --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: 800px;
  --breakpoint-md: 1000px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
  /* 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);
}

.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: rgba(0, 0, 0, 0.08);
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 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-block;
}
.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:hover {
  border-color: var(--info-500);
  cursor: pointer;
}
.tag:active {
  border-color: var(--tertiary-700);
}
.tag:focus {
  box-shadow: inset 0px 0px 0px 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);
}

.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: 0px 0px 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;
}

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

.text-truncate {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  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-direction: row;
  flex-wrap: nowrap;
  max-width: 100vw;
  min-height: 100vh;
  width: 100%;
}
@media (max-width: 800px) {
  .page {
    flex-direction: column;
  }
}

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

.page-nav {
  background-color: var(--bg-primary);
  border-right: 1px solid var(--line-colour-light);
}
@media (max-width: 1000px) {
  .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: 1000px) {
  .page-content {
    padding: var(--spacing-xxl);
  }
}
@media (max-width: 800px) {
  .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 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;
}

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;
	}
}.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: #ffffff;
				}
			}

			.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-areas: 'icon title'
			'message message';
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		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;
	}
}.inline-spinner__inline-container {
	height: 100%;
}

.inline-spinner__inline-container--overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	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: inlineSpinnerScale 2s ease-in-out infinite,
		inlineSpinnerSpin 1.4s linear infinite;
}

@keyframes inlineSpinnerScale {
	0% {
		scale: 1;
		opacity: 0.7;
	}

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

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

@keyframes inlineSpinnerSpin {
	100% {
		transform: rotate(360deg);
	}
}.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);
}.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);
}.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);
}
.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);
    border: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-inline-width: 0px;
    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: 0px;
          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: 0px 2px 4px
        color-mix(in srgb, var(--text-primary) 10%, transparent),
      0px 0px 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;
  }
}
/*! 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;
}
.v-stack,
.h-stack {
  display: flex;
}

.v-stack {
  flex-direction: column;
}.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 0px 0px 0px 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;
  }
}
.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);
    }
  }
}

.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-y: auto;
  overflow-x: hidden;
  box-shadow: 0px 0px 8px 0px 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);
    }
  }
}

/* Selected option (current selected row inside the control) */
.select-wrapper {
  .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-start: var(--input-padding-inline-start);
    padding-inline-end: 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;
    }
  }
}

/* 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;
  align-self: center;
  justify-self: 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;
}
.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;
    -webkit-appearance: none;
    -moz-appearance: 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;
  }
}