@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    local("DMSans-Regular"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff") format("woff");
}

@font-face {
  font-family: "DM Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src:
    local("DMSans-Medium"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff") format("woff");
}

@font-face {
  font-family: "DM Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    local("DMSans-Bold"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff") format("woff");
}

@font-face {
  font-family: "DM Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src:
    local("DMSans-Italic"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff") format("woff");
}

@font-face {
  font-family: "DM Sans";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src:
    local("DMSans-MediumItalic"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff") format("woff");
}

@font-face {
  font-family: "DM Sans";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src:
    local("DMSans-BoldItalic"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff") format("woff");
}

@font-face {
  font-family: "DM Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    local("DMMono-Regular"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff") format("woff");
}

@font-face {
  font-family: "Sinch Icons Zero To D";
  font-display: block;
  src:
    url("https://d2vu40klajma73.cloudfront.net/sinch-icon-zeroToD.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/sinch-icon-zeroToD.woff") format("woff");
}

@font-face {
  font-family: "Sinch Icons E To O";
  font-display: block;
  src:
    url("https://d2vu40klajma73.cloudfront.net/sinch-icon-eToO.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/sinch-icon-eToO.woff") format("woff");
}

@font-face {
  font-family: "Sinch Icons P To Z";
  font-display: block;
  src:
    url("https://d2vu40klajma73.cloudfront.net/sinch-icon-pToZ.woff2") format("woff2"),
    url("https://d2vu40klajma73.cloudfront.net/sinch-icon-pToZ.woff") format("woff");
}

/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:FILL@0..1 */

/* https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@1 */

/* https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined */

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src:
    local("MaterialSymbolsRoundedFilled24pt-Regular"),
    url("https://fonts.gstatic.com/s/materialsymbolsrounded/v109/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxeJKJBiCa8.woff2") format("woff2");
}

.nectary-theme-base {
  --sinch-ref-color-candy-100: #FFE5F7;
  --sinch-ref-color-candy-200: #FFD6F3;
  --sinch-ref-color-candy-300: #FFBDEC;
  --sinch-ref-color-candy-350: #FAA5E3;
  --sinch-ref-color-candy-400: #EB83CF;
  --sinch-ref-color-candy-50: #FFF5FC;
  --sinch-ref-color-candy-500: #D15CB4;
  --sinch-ref-color-candy-600: #A3488E;
  --sinch-ref-color-candy-700: #8A3778;
  --sinch-ref-color-candy-800: #472140;
  --sinch-ref-color-candy-900: #2E192A;
  --sinch-ref-color-grass-100: #D7F5D7;
  --sinch-ref-color-grass-200: #C2EDC5;
  --sinch-ref-color-grass-300: #99E0A2;
  --sinch-ref-color-grass-350: #77D486;
  --sinch-ref-color-grass-400: #53BD69;
  --sinch-ref-color-grass-50: #ECFFEB;
  --sinch-ref-color-grass-500: #3D9956;
  --sinch-ref-color-grass-600: #2B7845;
  --sinch-ref-color-grass-700: #23613C;
  --sinch-ref-color-grass-800: #163323;
  --sinch-ref-color-grass-900: #102419;
  --sinch-ref-color-honey-100: #FCECCB;
  --sinch-ref-color-honey-200: #FFDD99;
  --sinch-ref-color-honey-300: #FFCA61;
  --sinch-ref-color-honey-350: #FFBE3C;
  --sinch-ref-color-honey-400: #EB9605;
  --sinch-ref-color-honey-50: #FFF9EB;
  --sinch-ref-color-honey-500: #C77904;
  --sinch-ref-color-honey-600: #9E5A00;
  --sinch-ref-color-honey-700: #824703;
  --sinch-ref-color-honey-800: #472706;
  --sinch-ref-color-honey-900: #331B06;
  --sinch-ref-color-neutral-100: #EBEEF0;
  --sinch-ref-color-neutral-200: #DCE2E5;
  --sinch-ref-color-neutral-300: #C9D1D6;
  --sinch-ref-color-neutral-350: #B7C1C7;
  --sinch-ref-color-neutral-400: #9EA9B0;
  --sinch-ref-color-neutral-50: #F7F9FA;
  --sinch-ref-color-neutral-500: #808A91;
  --sinch-ref-color-neutral-600: #626C73;
  --sinch-ref-color-neutral-700: #4B575E;
  --sinch-ref-color-neutral-800: #272F36;
  --sinch-ref-color-neutral-900: #1A2126;
  --sinch-ref-color-neutral-950: #14181C;
  --sinch-ref-color-ocean-100: #E0F1FF;
  --sinch-ref-color-ocean-200: #C7E5FF;
  --sinch-ref-color-ocean-300: #A8D4FF;
  --sinch-ref-color-ocean-350: #8AC4FF;
  --sinch-ref-color-ocean-400: #61ABFF;
  --sinch-ref-color-ocean-50: #F2F9FF;
  --sinch-ref-color-ocean-500: #3089F0;
  --sinch-ref-color-ocean-600: #0D68D1;
  --sinch-ref-color-ocean-700: #1454A8;
  --sinch-ref-color-ocean-800: #112F57;
  --sinch-ref-color-ocean-900: #0F2138;
  --sinch-ref-color-pumpkin-100: #FFE9D6;
  --sinch-ref-color-pumpkin-200: #FFD9BD;
  --sinch-ref-color-pumpkin-300: #FFC299;
  --sinch-ref-color-pumpkin-350: #FFAD75;
  --sinch-ref-color-pumpkin-400: #F58B4E;
  --sinch-ref-color-pumpkin-50: #FFF7F0;
  --sinch-ref-color-pumpkin-500: #D66A33;
  --sinch-ref-color-pumpkin-600: #AD4E24;
  --sinch-ref-color-pumpkin-700: #8F3D1F;
  --sinch-ref-color-pumpkin-800: #4D2215;
  --sinch-ref-color-pumpkin-900: #361811;
  --sinch-ref-color-raspberry-100: #FFE5E3;
  --sinch-ref-color-raspberry-200: #FFD8D6;
  --sinch-ref-color-raspberry-300: #FFBDBD;
  --sinch-ref-color-raspberry-350: #FFA8A8;
  --sinch-ref-color-raspberry-400: #FF8080;
  --sinch-ref-color-raspberry-50: #FFF6F5;
  --sinch-ref-color-raspberry-500: #EB5454;
  --sinch-ref-color-raspberry-600: #BD3C41;
  --sinch-ref-color-raspberry-700: #993138;
  --sinch-ref-color-raspberry-800: #57181C;
  --sinch-ref-color-raspberry-900: #3D1215;
  --sinch-ref-color-tropical-100: #E2F0E8;
  --sinch-ref-color-tropical-200: #CEE5DA;
  --sinch-ref-color-tropical-300: #AFDBCD;
  --sinch-ref-color-tropical-350: #80CFBC;
  --sinch-ref-color-tropical-400: #51B8A6;
  --sinch-ref-color-tropical-50: #F0FAF4;
  --sinch-ref-color-tropical-500: #06998B;
  --sinch-ref-color-tropical-600: #007874;
  --sinch-ref-color-tropical-700: #006063;
  --sinch-ref-color-tropical-800: #0C333B;
  --sinch-ref-color-tropical-900: #0E2329;
  --sinch-ref-color-violet-100: #EFEBFF;
  --sinch-ref-color-violet-200: #E2DBFF;
  --sinch-ref-color-violet-300: #D0C8FA;
  --sinch-ref-color-violet-350: #C1B6FA;
  --sinch-ref-color-violet-400: #A89BFA;
  --sinch-ref-color-violet-50: #F8F5FF;
  --sinch-ref-color-violet-500: #857AEB;
  --sinch-ref-color-violet-600: #645DC2;
  --sinch-ref-color-violet-700: #4D4AA8;
  --sinch-ref-color-violet-800: #2A2A54;
  --sinch-ref-color-violet-900: #1E1E33;
  --sinch-ref-shadow-level-0: none;
  --sinch-ref-shadow-level-1: 1px 2px 6px #0A273D1A;
  --sinch-ref-shadow-level-2: 1px 4px 8px #0A273D1A;
  --sinch-ref-shadow-level-3: 1px 6px 12px #0A273D26;
  --sinch-ref-shadow-level-4: 0 8px 16px #0A273D1A;
  --sinch-ref-typography-font-family-main: "DM Sans", "Arial", sans-serif;
  --sinch-ref-typography-font-family-mono: "DM Mono", monospace;
  --sinch-ref-typography-font-size-10: 10px;
  --sinch-ref-typography-font-size-12: 12px;
  --sinch-ref-typography-font-size-14: 14px;
  --sinch-ref-typography-font-size-16: 16px;
  --sinch-ref-typography-font-size-18: 18px;
  --sinch-ref-typography-font-size-20: 20px;
  --sinch-ref-typography-font-size-24: 24px;
  --sinch-ref-typography-font-size-40: 40px;
  --sinch-ref-typography-font-size-56: 56px;
  --sinch-ref-typography-font-weight-300: 300;
  --sinch-ref-typography-font-weight-400: 400;
  --sinch-ref-typography-font-weight-500: 500;
  --sinch-ref-typography-font-weight-600: 600;
  --sinch-ref-typography-font-weight-700: 700;
  --sinch-ref-typography-letter-spacing-body: 0;
  --sinch-ref-typography-letter-spacing-title: -2%;
  --sinch-ref-typography-line-height-14: 14px;
  --sinch-ref-typography-line-height-16: 16px;
  --sinch-ref-typography-line-height-20: 20px;
  --sinch-ref-typography-line-height-22: 22px;
  --sinch-ref-typography-line-height-24: 24px;
  --sinch-ref-typography-line-height-28: 28px;
  --sinch-ref-typography-line-height-32: 32px;
  --sinch-ref-typography-line-height-48: 48px;
  --sinch-ref-typography-line-height-72: 72px;
  --sinch-ref-typography-paragraph-spacing-0: 0;
  --sinch-ref-typography-paragraph-spacing-1: 12;
  --sinch-ref-typography-text-case-none: none;
  --sinch-ref-typography-text-decoration-none: none;
  --sinch-ref-typography-text-decoration-underline: underline;
}

.nectary-theme-base {
  --sinch-sys-color-basic-pure: #FFFFFF;
  --sinch-sys-color-basic-pure-inverted: #000000;
  --sinch-sys-color-basic-transparent: transparent;
  --sinch-sys-color-border-default: var(--sinch-ref-color-neutral-350);
  --sinch-sys-color-border-disabled: var(--sinch-ref-color-neutral-100);
  --sinch-sys-color-border-strong: var(--sinch-ref-color-neutral-400);
  --sinch-sys-color-border-subtle: var(--sinch-ref-color-neutral-200);
  --sinch-sys-color-feedback-danger-default: #D63F3F;
  --sinch-sys-color-feedback-danger-strong: var(--sinch-ref-color-raspberry-700);
  --sinch-sys-color-feedback-danger-subtle: var(--sinch-ref-color-raspberry-200);
  --sinch-sys-color-feedback-info-default: var(--sinch-ref-color-ocean-500);
  --sinch-sys-color-feedback-info-strong: var(--sinch-ref-color-ocean-700);
  --sinch-sys-color-feedback-info-subtle: var(--sinch-ref-color-ocean-200);
  --sinch-sys-color-feedback-neutral-default: var(--sinch-ref-color-neutral-500);
  --sinch-sys-color-feedback-neutral-strong: var(--sinch-ref-color-neutral-700);
  --sinch-sys-color-feedback-neutral-subtle: var(--sinch-ref-color-neutral-200);
  --sinch-sys-color-feedback-success-default: var(--sinch-ref-color-grass-400);
  --sinch-sys-color-feedback-success-strong: var(--sinch-ref-color-grass-700);
  --sinch-sys-color-feedback-success-subtle: var(--sinch-ref-color-grass-200);
  --sinch-sys-color-feedback-warning-default: var(--sinch-ref-color-pumpkin-400);
  --sinch-sys-color-feedback-warning-strong: var(--sinch-ref-color-pumpkin-700);
  --sinch-sys-color-feedback-warning-subtle: var(--sinch-ref-color-pumpkin-200);
  --sinch-sys-color-focus: var(--sinch-ref-color-ocean-400);
  --sinch-sys-color-primary-active: var(--sinch-ref-color-tropical-800);
  --sinch-sys-color-primary-default: var(--sinch-ref-color-tropical-700);
  --sinch-sys-color-primary-disabled: var(--sinch-ref-color-tropical-400);
  --sinch-sys-color-primary-foreground: var(--sinch-sys-color-basic-pure);
  --sinch-sys-color-primary-hover: var(--sinch-ref-color-tropical-600);
  --sinch-sys-color-surface-canvas: var(--sinch-ref-color-neutral-100);
  --sinch-sys-color-surface-primary-active: var(--sinch-ref-color-neutral-100);
  --sinch-sys-color-surface-primary-default: var(--sinch-sys-color-basic-pure);
  --sinch-sys-color-surface-primary-disabled: var(--sinch-sys-color-basic-pure);
  --sinch-sys-color-surface-primary-hover: var(--sinch-ref-color-neutral-50);
  --sinch-sys-color-surface-secondary-active: var(--sinch-ref-color-neutral-200);
  --sinch-sys-color-surface-secondary-default: var(--sinch-ref-color-neutral-50);
  --sinch-sys-color-surface-secondary-disabled: var(--sinch-ref-color-neutral-50);
  --sinch-sys-color-surface-secondary-hover: var(--sinch-ref-color-neutral-100);
  --sinch-sys-color-surface-tertiary-active: var(--sinch-ref-color-neutral-300);
  --sinch-sys-color-surface-tertiary-default: var(--sinch-ref-color-neutral-100);
  --sinch-sys-color-surface-tertiary-disabled: var(--sinch-ref-color-neutral-50);
  --sinch-sys-color-surface-tertiary-hover: var(--sinch-ref-color-neutral-200);
  --sinch-sys-color-surface-transparent-active: #1A212633;
  --sinch-sys-color-surface-transparent-default: var(--sinch-sys-color-basic-transparent);
  --sinch-sys-color-surface-transparent-disabled: var(--sinch-sys-color-basic-transparent);
  --sinch-sys-color-surface-transparent-hover: #1A21261A;
  --sinch-sys-color-text-caption: var(--sinch-ref-color-neutral-700);
  --sinch-sys-color-text-default: var(--sinch-ref-color-neutral-900);
  --sinch-sys-color-text-disabled: var(--sinch-ref-color-neutral-400);
  --sinch-sys-color-text-muted: var(--sinch-ref-color-neutral-600);
  --sinch-sys-font-body-emphasize: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-body-emphasize-s: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-body-emphasize-xs: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-body-link: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-body-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-body-monospace-m: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-mono);
  --sinch-sys-font-body-monospace-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-mono);
  --sinch-sys-font-body-monospace-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-mono);
  --sinch-sys-font-body-monospace-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-mono);
  --sinch-sys-font-body-s: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-body-xs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-body-xxs: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-desktop-title-hero: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-56)/var(--sinch-ref-typography-line-height-72) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-desktop-title-l: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-24)/var(--sinch-ref-typography-line-height-32) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-desktop-title-m: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-20)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-desktop-title-s: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-desktop-title-xl: var(--sinch-ref-typography-font-weight-400) var(--sinch-ref-typography-font-size-40)/var(--sinch-ref-typography-line-height-48) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-font-desktop-title-xs: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
  --sinch-sys-shape-radius-full: 9999px;
  --sinch-sys-shape-radius-l: 14px;
  --sinch-sys-shape-radius-m: 10px;
  --sinch-sys-shape-radius-s: 6px;
  --sinch-sys-shape-radius-xs: 2px;
  --sinch-sys-size-l: 48px;
  --sinch-sys-size-m: 40px;
  --sinch-sys-size-s: 32px;
  --sinch-sys-size-xs: 24px;
}

.nectary-theme-base {
  --sinch-comp-accordion-color-default-border-initial: var(--sinch-sys-color-border-default);
  --sinch-comp-accordion-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-accordion-color-default-optional-text-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-accordion-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-accordion-color-default-status-error: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-accordion-color-default-status-info: var(--sinch-sys-color-feedback-info-default);
  --sinch-comp-accordion-color-default-status-success: var(--sinch-sys-color-feedback-success-default);
  --sinch-comp-accordion-color-default-status-warning: var(--sinch-sys-color-feedback-warning-default);
  --sinch-comp-accordion-color-default-title-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-accordion-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-accordion-color-disabled-optional-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-accordion-color-disabled-title-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-accordion-font-optional-text: var(--sinch-sys-font-body-s);
  --sinch-comp-accordion-font-title: var(--sinch-sys-font-desktop-title-m);
  --sinch-comp-accordion-size-icon: var(--sinch-sys-size-xs);
}

.nectary-theme-base {
  --sinch-comp-action-menu-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-action-menu-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-action-menu-color-default-background-selected: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-action-menu-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-action-menu-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-action-menu-color-disabled-background-initial: var(--sinch-sys-color-surface-transparent-disabled);
  --sinch-comp-action-menu-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-action-menu-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-action-menu-font-option: var(--sinch-sys-font-body-m);
  --sinch-comp-action-menu-size-icon: var(--sinch-sys-size-xs);
}

.nectary-theme-base {
  --sinch-comp-alert-color-error-default-background: var(--sinch-sys-color-feedback-danger-subtle);
  --sinch-comp-alert-color-error-default-icon: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-alert-color-error-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-alert-color-info-default-background: var(--sinch-sys-color-feedback-info-subtle);
  --sinch-comp-alert-color-info-default-icon: var(--sinch-sys-color-feedback-info-default);
  --sinch-comp-alert-color-info-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-alert-color-warning-default-background: var(--sinch-sys-color-feedback-warning-subtle);
  --sinch-comp-alert-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-default);
  --sinch-comp-alert-color-warning-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-alert-font-body: var(--sinch-sys-font-body-m);
}

.nectary-theme-base {
  --sinch-comp-avatar-container-color-blue-background: var(--sinch-ref-color-ocean-700);
  --sinch-comp-avatar-container-color-blue-foreground: var(--sinch-sys-color-basic-pure);
  --sinch-comp-avatar-container-color-dark-blue-background: var(--sinch-ref-color-ocean-800);
  --sinch-comp-avatar-container-color-dark-blue-foreground: var(--sinch-ref-color-ocean-100);
  --sinch-comp-avatar-container-color-dark-gray-background: var(--sinch-ref-color-neutral-800);
  --sinch-comp-avatar-container-color-dark-gray-foreground: var(--sinch-ref-color-neutral-200);
  --sinch-comp-avatar-container-color-dark-green-background: var(--sinch-ref-color-grass-700);
  --sinch-comp-avatar-container-color-dark-green-foreground: var(--sinch-ref-color-grass-200);
  --sinch-comp-avatar-container-color-dark-orange-background: var(--sinch-ref-color-pumpkin-700);
  --sinch-comp-avatar-container-color-dark-orange-foreground: var(--sinch-ref-color-pumpkin-200);
  --sinch-comp-avatar-container-color-dark-pink-background: var(--sinch-ref-color-candy-700);
  --sinch-comp-avatar-container-color-dark-pink-foreground: var(--sinch-ref-color-candy-200);
  --sinch-comp-avatar-container-color-dark-red-background: var(--sinch-ref-color-raspberry-700);
  --sinch-comp-avatar-container-color-dark-red-foreground: var(--sinch-ref-color-raspberry-200);
  --sinch-comp-avatar-container-color-dark-violet-background: var(--sinch-ref-color-violet-700);
  --sinch-comp-avatar-container-color-dark-violet-foreground: var(--sinch-ref-color-violet-200);
  --sinch-comp-avatar-container-color-dark-yellow-background: var(--sinch-ref-color-honey-700);
  --sinch-comp-avatar-container-color-dark-yellow-foreground: var(--sinch-ref-color-honey-200);
  --sinch-comp-avatar-container-color-default-background: var(--sinch-ref-color-neutral-200);
  --sinch-comp-avatar-container-color-default-foreground: var(--sinch-ref-color-neutral-600);
  --sinch-comp-avatar-container-color-gray-background: var(--sinch-ref-color-neutral-600);
  --sinch-comp-avatar-container-color-gray-foreground: var(--sinch-sys-color-basic-pure);
  --sinch-comp-avatar-container-color-green-background: var(--sinch-ref-color-grass-400);
  --sinch-comp-avatar-container-color-green-foreground: var(--sinch-ref-color-neutral-900);
  --sinch-comp-avatar-container-color-light-blue-background: var(--sinch-ref-color-ocean-100);
  --sinch-comp-avatar-container-color-light-blue-foreground: var(--sinch-ref-color-ocean-800);
  --sinch-comp-avatar-container-color-light-gray-background: var(--sinch-ref-color-neutral-200);
  --sinch-comp-avatar-container-color-light-gray-foreground: var(--sinch-ref-color-neutral-800);
  --sinch-comp-avatar-container-color-light-green-background: var(--sinch-ref-color-grass-200);
  --sinch-comp-avatar-container-color-light-green-foreground: var(--sinch-ref-color-grass-700);
  --sinch-comp-avatar-container-color-light-orange-background: var(--sinch-ref-color-pumpkin-200);
  --sinch-comp-avatar-container-color-light-orange-foreground: var(--sinch-ref-color-pumpkin-700);
  --sinch-comp-avatar-container-color-light-pink-background: var(--sinch-ref-color-candy-200);
  --sinch-comp-avatar-container-color-light-pink-foreground: var(--sinch-ref-color-candy-700);
  --sinch-comp-avatar-container-color-light-red-background: var(--sinch-ref-color-raspberry-200);
  --sinch-comp-avatar-container-color-light-red-foreground: var(--sinch-ref-color-raspberry-700);
  --sinch-comp-avatar-container-color-light-violet-background: var(--sinch-ref-color-violet-200);
  --sinch-comp-avatar-container-color-light-violet-foreground: var(--sinch-ref-color-violet-700);
  --sinch-comp-avatar-container-color-light-yellow-background: var(--sinch-ref-color-honey-200);
  --sinch-comp-avatar-container-color-light-yellow-foreground: var(--sinch-ref-color-honey-700);
  --sinch-comp-avatar-container-color-orange-background: var(--sinch-ref-color-pumpkin-400);
  --sinch-comp-avatar-container-color-orange-foreground: var(--sinch-ref-color-neutral-900);
  --sinch-comp-avatar-container-color-pink-background: var(--sinch-ref-color-candy-400);
  --sinch-comp-avatar-container-color-pink-foreground: var(--sinch-ref-color-neutral-900);
  --sinch-comp-avatar-container-color-red-background: var(--sinch-ref-color-raspberry-400);
  --sinch-comp-avatar-container-color-red-foreground: var(--sinch-ref-color-raspberry-900);
  --sinch-comp-avatar-container-color-violet-background: var(--sinch-ref-color-violet-400);
  --sinch-comp-avatar-container-color-violet-foreground: var(--sinch-sys-color-basic-pure-inverted);
  --sinch-comp-avatar-container-color-yellow-background: var(--sinch-ref-color-honey-400);
  --sinch-comp-avatar-container-color-yellow-foreground: var(--sinch-ref-color-neutral-900);
  --sinch-comp-avatar-container-font-size-l-text: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-20)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
  --sinch-comp-avatar-container-font-size-m-text: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
  --sinch-comp-avatar-container-font-size-s-text: var(--sinch-ref-typography-font-weight-600) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-16) var(--sinch-ref-typography-font-family-main);
  --sinch-comp-avatar-shape-radius: var(--sinch-sys-shape-radius-full);
  --sinch-comp-avatar-size-l: 56px;
  --sinch-comp-avatar-size-m: 40px;
  --sinch-comp-avatar-size-s: 24px;
  --sinch-comp-avatar-status-color-away-default-background: var(--sinch-sys-color-feedback-warning-default);
  --sinch-comp-avatar-status-color-border: var(--sinch-sys-color-basic-pure);
  --sinch-comp-avatar-status-color-busy-default-background: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-avatar-status-color-offline-default-background: var(--sinch-sys-color-feedback-neutral-default);
  --sinch-comp-avatar-status-color-online-default-background: var(--sinch-sys-color-feedback-success-default);
}

.nectary-theme-base {
  --sinch-comp-badge-color-background: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-badge-color-border: var(--sinch-sys-color-basic-pure);
  --sinch-comp-badge-color-text: var(--sinch-sys-color-basic-pure);
  --sinch-comp-badge-font-size-l: var(--sinch-ref-typography-font-weight-400) 14px/20px var(--sinch-ref-typography-font-family-mono);
  --sinch-comp-badge-font-size-m: var(--sinch-ref-typography-font-weight-400) 12px/14px var(--sinch-ref-typography-font-family-mono);
  --sinch-comp-badge-shape-radius: var(--sinch-sys-shape-radius-full);
}

.nectary-theme-base {
  --sinch-comp-button-color-cta-primary-default-background-active: var(--sinch-ref-color-honey-300);
  --sinch-comp-button-color-cta-primary-default-background-hover: var(--sinch-ref-color-honey-200);
  --sinch-comp-button-color-cta-primary-default-background-initial: var(--sinch-ref-color-honey-350);
  --sinch-comp-button-color-cta-primary-default-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-button-color-cta-primary-default-icon-initial: var(--sinch-ref-color-neutral-900);
  --sinch-comp-button-color-cta-primary-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-button-color-cta-primary-default-text-initial: var(--sinch-ref-color-neutral-900);
  --sinch-comp-button-color-cta-primary-disabled-background-initial: var(--sinch-ref-color-honey-50);
  --sinch-comp-button-color-cta-primary-disabled-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-button-color-cta-primary-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-button-color-cta-primary-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-button-color-cta-secondary-default-background-active: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-button-color-cta-secondary-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-button-color-cta-secondary-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-button-color-cta-secondary-default-border-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-button-color-cta-secondary-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-button-color-cta-secondary-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-button-color-cta-secondary-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-button-color-cta-secondary-disabled-background-initial: var(--sinch-sys-color-surface-primary-disabled);
  --sinch-comp-button-color-cta-secondary-disabled-border-initial: var(--sinch-sys-color-border-disabled);
  --sinch-comp-button-color-cta-secondary-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-button-color-cta-secondary-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-button-color-danger-default-background-active: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-button-color-danger-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-button-color-danger-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-button-color-danger-default-border-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-button-color-danger-default-icon-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-button-color-danger-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-button-color-danger-default-text-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-button-color-danger-disabled-background-initial: var(--sinch-sys-color-surface-primary-disabled);
  --sinch-comp-button-color-danger-disabled-border-initial: var(--sinch-sys-color-border-disabled);
  --sinch-comp-button-color-danger-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-button-color-danger-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-button-color-primary-default-background-active: var(--sinch-sys-color-primary-active);
  --sinch-comp-button-color-primary-default-background-hover: var(--sinch-sys-color-primary-hover);
  --sinch-comp-button-color-primary-default-background-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-button-color-primary-default-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-button-color-primary-default-icon-initial: var(--sinch-sys-color-primary-foreground);
  --sinch-comp-button-color-primary-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-button-color-primary-default-text-initial: var(--sinch-sys-color-primary-foreground);
  --sinch-comp-button-color-primary-disabled-background-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-button-color-primary-disabled-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-button-color-primary-disabled-icon-initial: var(--sinch-sys-color-primary-foreground);
  --sinch-comp-button-color-primary-disabled-text-initial: var(--sinch-sys-color-primary-foreground);
  --sinch-comp-button-color-secondary-default-background-active: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-button-color-secondary-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-button-color-secondary-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-button-color-secondary-default-border-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-button-color-secondary-default-icon-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-button-color-secondary-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-button-color-secondary-default-text-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-button-color-secondary-disabled-background-initial: var(--sinch-sys-color-surface-primary-disabled);
  --sinch-comp-button-color-secondary-disabled-border-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-button-color-secondary-disabled-icon-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-button-color-secondary-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-button-color-subtle-primary-default-background-active: var(--sinch-sys-color-surface-transparent-active);
  --sinch-comp-button-color-subtle-primary-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-button-color-subtle-primary-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-button-color-subtle-primary-default-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-button-color-subtle-primary-default-icon-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-button-color-subtle-primary-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-button-color-subtle-primary-default-text-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-button-color-subtle-primary-disabled-background-initial: var(--sinch-sys-color-surface-transparent-disabled);
  --sinch-comp-button-color-subtle-primary-disabled-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-button-color-subtle-primary-disabled-icon-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-button-color-subtle-primary-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-button-color-subtle-primary-toggled-background-active: #24242433;
  --sinch-comp-button-color-subtle-primary-toggled-background-hover: #24242426;
  --sinch-comp-button-color-subtle-primary-toggled-background-initial: #2424241A;
  --sinch-comp-button-color-subtle-secondary-default-background-active: var(--sinch-sys-color-surface-transparent-active);
  --sinch-comp-button-color-subtle-secondary-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-button-color-subtle-secondary-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-button-color-subtle-secondary-default-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-button-color-subtle-secondary-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-button-color-subtle-secondary-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-button-color-subtle-secondary-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-button-color-subtle-secondary-disabled-background-initial: var(--sinch-sys-color-surface-transparent-disabled);
  --sinch-comp-button-color-subtle-secondary-disabled-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-button-color-subtle-secondary-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-button-color-subtle-secondary-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-button-color-subtle-secondary-toggled-background-active: #24242433;
  --sinch-comp-button-color-subtle-secondary-toggled-background-hover: #24242426;
  --sinch-comp-button-color-subtle-secondary-toggled-background-initial: #2424241A;
  --sinch-comp-button-font-size-l-text: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-button-font-size-m-text: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-button-font-size-s-text: var(--sinch-sys-font-body-emphasize-s);
  --sinch-comp-button-font-size-xs-text: var(--sinch-sys-font-body-emphasize-s);
  --sinch-comp-button-shadow-cta-primary-active: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-primary-disabled: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-primary-focus: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-primary-hover: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-primary-initial: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-secondary-active: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-secondary-disabled: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-secondary-focus: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-secondary-hover: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-cta-secondary-initial: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-danger-active: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-danger-disabled: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-danger-focus: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-danger-hover: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-danger-initial: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-primary-active: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-primary-disabled: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-primary-focus: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-primary-hover: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-primary-initial: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-secondary-active: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-secondary-disabled: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-secondary-focus: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-secondary-hover: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-secondary-initial: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-subtle-active: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-subtle-disabled: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-subtle-focus: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-subtle-hover: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shadow-subtle-initial: var(--sinch-ref-shadow-level-0);
  --sinch-comp-button-shape-radius-size-l: var(--sinch-sys-shape-radius-l);
  --sinch-comp-button-shape-radius-size-m: var(--sinch-sys-shape-radius-m);
  --sinch-comp-button-shape-radius-size-s: var(--sinch-sys-shape-radius-s);
  --sinch-comp-button-shape-radius-size-xs: var(--sinch-sys-shape-radius-xs);
  --sinch-comp-button-size-container-l: var(--sinch-sys-size-l);
  --sinch-comp-button-size-container-m: var(--sinch-sys-size-m);
  --sinch-comp-button-size-container-s: var(--sinch-sys-size-s);
  --sinch-comp-button-size-container-xs: var(--sinch-sys-size-xs);
  --sinch-comp-button-size-icon-l: 32px;
  --sinch-comp-button-size-icon-m: 24px;
  --sinch-comp-button-size-icon-s: 24px;
  --sinch-comp-button-size-icon-xs: 16px;
  --sinch-comp-button-spacing-gap-l: 12px;
  --sinch-comp-button-spacing-gap-m: 12px;
  --sinch-comp-button-spacing-gap-s: 12px;
  --sinch-comp-button-spacing-gap-xs: 8px;
  --sinch-comp-button-spacing-icon-only-padding-l: 8px;
  --sinch-comp-button-spacing-icon-only-padding-m: 8px;
  --sinch-comp-button-spacing-icon-only-padding-s: 4px;
  --sinch-comp-button-spacing-icon-only-padding-xs: 4px;
  --sinch-comp-button-spacing-padding-l: 16px;
  --sinch-comp-button-spacing-padding-m: 16px;
  --sinch-comp-button-spacing-padding-s: 16px;
  --sinch-comp-button-spacing-padding-xs: 8px;
}

.nectary-theme-base {
  --sinch-comp-card-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-card-color-default-border-initial: var(--sinch-sys-color-border-default);
  --sinch-comp-card-color-default-description-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-card-color-default-title-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-card-font-description: var(--sinch-sys-font-body-m);
  --sinch-comp-card-font-label: var(--sinch-sys-font-desktop-title-xs);
  --sinch-comp-card-font-title: var(--sinch-sys-font-desktop-title-m);
  --sinch-comp-card-shadow-hover: var(--sinch-ref-shadow-level-1);
  --sinch-comp-card-shadow-initial: var(--sinch-ref-shadow-level-0);
  --sinch-comp-card-shape-radius: var(--sinch-sys-shape-radius-l);
  --sinch-comp-card-size-icon: 48px;
}

.nectary-theme-base {
  --sinch-comp-card-v2-color-default-background-active: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-card-v2-color-default-background-disabled: var(--sinch-sys-color-surface-primary-disabled);
  --sinch-comp-card-v2-color-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-card-v2-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-card-v2-color-default-border-active: var(--sinch-sys-color-border-default);
  --sinch-comp-card-v2-color-default-border-disabled: var(--sinch-sys-color-border-disabled);
  --sinch-comp-card-v2-color-default-border-hover: var(--sinch-sys-color-border-default);
  --sinch-comp-card-v2-color-default-border-initial: var(--sinch-sys-color-border-default);
  --sinch-comp-card-v2-color-default-description-disabled: var(--sinch-sys-color-text-disabled);
  --sinch-comp-card-v2-color-default-description-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-card-v2-color-default-icon-disabled: var(--sinch-sys-color-text-disabled);
  --sinch-comp-card-v2-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-card-v2-color-default-title-disabled: var(--sinch-sys-color-text-disabled);
  --sinch-comp-card-v2-color-default-title-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-card-v2-color-selected-background-active: var(--sinch-ref-color-ocean-200);
  --sinch-comp-card-v2-color-selected-background-disabled: var(--sinch-ref-color-ocean-50);
  --sinch-comp-card-v2-color-selected-background-hover: var(--sinch-ref-color-ocean-100);
  --sinch-comp-card-v2-color-selected-background-initial: var(--sinch-ref-color-ocean-100);
  --sinch-comp-card-v2-color-selected-border-active: var(--sinch-ref-color-ocean-400);
  --sinch-comp-card-v2-color-selected-border-disabled: var(--sinch-ref-color-ocean-200);
  --sinch-comp-card-v2-color-selected-border-hover: var(--sinch-ref-color-ocean-350);
  --sinch-comp-card-v2-color-selected-border-initial: var(--sinch-ref-color-ocean-300);
  --sinch-comp-card-v2-color-selected-description-disabled: var(--sinch-sys-color-text-disabled);
  --sinch-comp-card-v2-color-selected-description-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-card-v2-color-selected-icon-disabled: var(--sinch-sys-color-text-disabled);
  --sinch-comp-card-v2-color-selected-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-card-v2-color-selected-title-disabled: var(--sinch-sys-color-text-disabled);
  --sinch-comp-card-v2-color-selected-title-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-card-v2-font-description: var(--sinch-sys-font-body-m);
  --sinch-comp-card-v2-font-title: var(--sinch-sys-font-desktop-title-l);
  --sinch-comp-card-v2-shadow-active: var(--sinch-ref-shadow-level-0);
  --sinch-comp-card-v2-shadow-disabled: var(--sinch-ref-shadow-level-0);
  --sinch-comp-card-v2-shadow-hover: var(--sinch-ref-shadow-level-2);
  --sinch-comp-card-v2-shadow-initial: var(--sinch-ref-shadow-level-0);
  --sinch-comp-card-v2-shape-radius: var(--sinch-sys-shape-radius-l);
  --sinch-comp-card-v2-size-icon: var(--sinch-sys-size-l);
}

.nectary-theme-base {
  --sinch-comp-chat-shape-radius: var(--sinch-sys-shape-radius-l);
}

.nectary-theme-base {
  --sinch-comp-checkbox-color-checked-background-active: var(--sinch-sys-color-primary-active);
  --sinch-comp-checkbox-color-checked-background-hover: var(--sinch-sys-color-primary-hover);
  --sinch-comp-checkbox-color-checked-background-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-checkbox-color-checked-border-active: var(--sinch-sys-color-primary-active);
  --sinch-comp-checkbox-color-checked-border-hover: var(--sinch-sys-color-primary-hover);
  --sinch-comp-checkbox-color-checked-border-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-checkbox-color-checked-disabled-background-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-checkbox-color-checked-disabled-border-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-checkbox-color-default-background-active: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-checkbox-color-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-checkbox-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-checkbox-color-default-border-active: var(--sinch-sys-color-border-strong);
  --sinch-comp-checkbox-color-default-border-hover: var(--sinch-sys-color-border-strong);
  --sinch-comp-checkbox-color-default-border-initial: var(--sinch-sys-color-border-strong);
  --sinch-comp-checkbox-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-checkbox-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-checkbox-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-checkbox-color-disabled-border-initial: var(--sinch-sys-color-border-disabled);
  --sinch-comp-checkbox-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-checkbox-color-invalid-background-active: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-checkbox-color-invalid-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-checkbox-color-invalid-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-checkbox-color-invalid-border-active: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-checkbox-color-invalid-border-hover: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-checkbox-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-checkbox-color-invalid-text-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-checkbox-font-label: var(--sinch-sys-font-body-m);
  --sinch-comp-checkbox-shape-radius: var(--sinch-sys-shape-radius-s);
}

.nectary-theme-base {
  --sinch-comp-chip-border: var(--sinch-sys-color-basic-pure);
  --sinch-comp-chip-color-blue-default-background-initial: var(--sinch-ref-color-ocean-700);
  --sinch-comp-chip-color-blue-default-foreground-initial: var(--sinch-ref-color-ocean-50);
  --sinch-comp-chip-color-danger-default-background-initial: var(--sinch-sys-color-feedback-danger-subtle);
  --sinch-comp-chip-color-danger-default-foreground-initial: var(--sinch-sys-color-feedback-danger-strong);
  --sinch-comp-chip-color-dark-blue-default-background-initial: var(--sinch-ref-color-ocean-800);
  --sinch-comp-chip-color-dark-blue-default-foreground-initial: var(--sinch-ref-color-ocean-100);
  --sinch-comp-chip-color-dark-gray-default-background-initial: var(--sinch-ref-color-neutral-800);
  --sinch-comp-chip-color-dark-gray-default-foreground-initial: var(--sinch-ref-color-neutral-200);
  --sinch-comp-chip-color-dark-green-default-background-initial: var(--sinch-ref-color-grass-800);
  --sinch-comp-chip-color-dark-green-default-foreground-initial: var(--sinch-ref-color-grass-100);
  --sinch-comp-chip-color-dark-orange-default-background-initial: var(--sinch-ref-color-pumpkin-700);
  --sinch-comp-chip-color-dark-orange-default-foreground-initial: var(--sinch-ref-color-pumpkin-100);
  --sinch-comp-chip-color-dark-pink-default-background-initial: var(--sinch-ref-color-candy-800);
  --sinch-comp-chip-color-dark-pink-default-foreground-initial: var(--sinch-ref-color-candy-200);
  --sinch-comp-chip-color-dark-red-default-background-initial: var(--sinch-ref-color-raspberry-800);
  --sinch-comp-chip-color-dark-red-default-foreground-initial: var(--sinch-ref-color-raspberry-100);
  --sinch-comp-chip-color-dark-violet-default-background-initial: var(--sinch-ref-color-violet-800);
  --sinch-comp-chip-color-dark-violet-default-foreground-initial: var(--sinch-ref-color-violet-100);
  --sinch-comp-chip-color-dark-yellow-default-background-initial: var(--sinch-ref-color-honey-600);
  --sinch-comp-chip-color-dark-yellow-default-foreground-initial: var(--sinch-ref-color-honey-100);
  --sinch-comp-chip-color-gray-default-background-initial: var(--sinch-ref-color-neutral-600);
  --sinch-comp-chip-color-gray-default-foreground-initial: var(--sinch-ref-color-neutral-50);
  --sinch-comp-chip-color-green-default-background-initial: var(--sinch-ref-color-grass-600);
  --sinch-comp-chip-color-green-default-foreground-initial: var(--sinch-ref-color-grass-50);
  --sinch-comp-chip-color-info-default-background-initial: var(--sinch-sys-color-feedback-info-subtle);
  --sinch-comp-chip-color-info-default-foreground-initial: var(--sinch-sys-color-feedback-info-strong);
  --sinch-comp-chip-color-light-blue-default-background-initial: var(--sinch-ref-color-ocean-100);
  --sinch-comp-chip-color-light-blue-default-foreground-initial: var(--sinch-ref-color-ocean-800);
  --sinch-comp-chip-color-light-gray-default-background-initial: var(--sinch-ref-color-neutral-200);
  --sinch-comp-chip-color-light-gray-default-foreground-initial: var(--sinch-ref-color-neutral-800);
  --sinch-comp-chip-color-light-green-default-background-initial: var(--sinch-ref-color-grass-200);
  --sinch-comp-chip-color-light-green-default-foreground-initial: var(--sinch-ref-color-grass-700);
  --sinch-comp-chip-color-light-orange-default-background-initial: var(--sinch-ref-color-pumpkin-200);
  --sinch-comp-chip-color-light-orange-default-foreground-initial: var(--sinch-ref-color-pumpkin-700);
  --sinch-comp-chip-color-light-pink-default-background-initial: var(--sinch-ref-color-candy-200);
  --sinch-comp-chip-color-light-pink-default-foreground-initial: var(--sinch-ref-color-candy-700);
  --sinch-comp-chip-color-light-red-default-background-initial: var(--sinch-ref-color-raspberry-200);
  --sinch-comp-chip-color-light-red-default-foreground-initial: var(--sinch-ref-color-raspberry-700);
  --sinch-comp-chip-color-light-violet-default-background-initial: var(--sinch-ref-color-violet-200);
  --sinch-comp-chip-color-light-violet-default-foreground-initial: var(--sinch-ref-color-violet-700);
  --sinch-comp-chip-color-light-yellow-default-background-initial: var(--sinch-ref-color-honey-200);
  --sinch-comp-chip-color-light-yellow-default-foreground-initial: var(--sinch-ref-color-honey-700);
  --sinch-comp-chip-color-neutral-default-background-initial: var(--sinch-ref-color-neutral-200);
  --sinch-comp-chip-color-neutral-default-foreground-initial: var(--sinch-ref-color-neutral-900);
  --sinch-comp-chip-color-orange-default-background-initial: var(--sinch-ref-color-pumpkin-400);
  --sinch-comp-chip-color-orange-default-foreground-initial: var(--sinch-ref-color-pumpkin-800);
  --sinch-comp-chip-color-outiline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-chip-color-pink-default-background-initial: var(--sinch-ref-color-candy-600);
  --sinch-comp-chip-color-pink-default-foreground-initial: var(--sinch-ref-color-candy-50);
  --sinch-comp-chip-color-red-default-background-initial: var(--sinch-ref-color-raspberry-600);
  --sinch-comp-chip-color-red-default-foreground-initial: var(--sinch-ref-color-raspberry-50);
  --sinch-comp-chip-color-success-default-background-initial: var(--sinch-sys-color-feedback-success-subtle);
  --sinch-comp-chip-color-success-default-foreground-initial: var(--sinch-sys-color-feedback-success-strong);
  --sinch-comp-chip-color-violet-default-background-initial: var(--sinch-ref-color-violet-600);
  --sinch-comp-chip-color-violet-default-foreground-initial: var(--sinch-ref-color-violet-50);
  --sinch-comp-chip-color-warning-default-background-initial: var(--sinch-sys-color-feedback-warning-subtle);
  --sinch-comp-chip-color-warning-default-foreground-initial: var(--sinch-sys-color-feedback-warning-strong);
  --sinch-comp-chip-color-yellow-default-background-initial: var(--sinch-ref-color-honey-350);
  --sinch-comp-chip-color-yellow-default-foreground-initial: var(--sinch-ref-color-honey-900);
  --sinch-comp-chip-font-size-m-label: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
  --sinch-comp-chip-font-size-s-label: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
  --sinch-comp-chip-shape-radius: var(--sinch-sys-shape-radius-full);
  --sinch-comp-chip-size-container-m: 24px;
  --sinch-comp-chip-size-container-s: 20px;
  --sinch-comp-chip-size-icon-m: 16px;
  --sinch-comp-chip-size-icon-s: 14px;
}

.nectary-theme-base {
  --sinch-comp-code-snippet-color-default-background-initial: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-code-snippet-shape-radius: var(--sinch-sys-shape-radius-l);
}

.nectary-theme-base {
  --sinch-comp-code-tag-color-default-background-initial: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-code-tag-color-default-border-initial: var(--sinch-sys-color-border-subtle);
  --sinch-comp-code-tag-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-code-tag-font-text: var(--sinch-sys-font-body-monospace-m);
  --sinch-comp-code-tag-shape-radius: var(--sinch-sys-shape-radius-xs);
}

.nectary-theme-base {
  --sinch-comp-color-menu-option-color-default-border-active: var(--sinch-ref-color-neutral-700);
  --sinch-comp-color-menu-option-color-default-border-focus: var(--sinch-sys-color-focus);
  --sinch-comp-color-menu-option-color-default-border-hover: var(--sinch-ref-color-neutral-500);
  --sinch-comp-color-menu-option-color-default-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-color-menu-option-color-default-border-selected: var(--sinch-sys-color-basic-pure-inverted);
}

.nectary-theme-base {
  --sinch-comp-color-swatch-color-blue-background: var(--sinch-ref-color-ocean-700);
  --sinch-comp-color-swatch-color-dark-blue-background: var(--sinch-ref-color-ocean-800);
  --sinch-comp-color-swatch-color-dark-gray-background: var(--sinch-ref-color-neutral-800);
  --sinch-comp-color-swatch-color-dark-green-background: var(--sinch-ref-color-grass-700);
  --sinch-comp-color-swatch-color-dark-orange-background: var(--sinch-ref-color-pumpkin-700);
  --sinch-comp-color-swatch-color-dark-pink-background: var(--sinch-ref-color-candy-700);
  --sinch-comp-color-swatch-color-dark-red-background: var(--sinch-ref-color-raspberry-700);
  --sinch-comp-color-swatch-color-dark-violet-background: var(--sinch-ref-color-violet-700);
  --sinch-comp-color-swatch-color-dark-yellow-background: var(--sinch-ref-color-honey-700);
  --sinch-comp-color-swatch-color-default-background: var(--sinch-ref-color-neutral-200);
  --sinch-comp-color-swatch-color-gray-background: var(--sinch-ref-color-neutral-500);
  --sinch-comp-color-swatch-color-green-background: var(--sinch-ref-color-grass-400);
  --sinch-comp-color-swatch-color-light-blue-background: var(--sinch-ref-color-ocean-100);
  --sinch-comp-color-swatch-color-light-gray-background: var(--sinch-ref-color-neutral-200);
  --sinch-comp-color-swatch-color-light-green-background: var(--sinch-ref-color-grass-200);
  --sinch-comp-color-swatch-color-light-orange-background: var(--sinch-ref-color-pumpkin-200);
  --sinch-comp-color-swatch-color-light-pink-background: var(--sinch-ref-color-candy-200);
  --sinch-comp-color-swatch-color-light-red-background: var(--sinch-ref-color-raspberry-200);
  --sinch-comp-color-swatch-color-light-violet-background: var(--sinch-ref-color-violet-200);
  --sinch-comp-color-swatch-color-light-yellow-background: var(--sinch-ref-color-honey-200);
  --sinch-comp-color-swatch-color-orange-background: var(--sinch-ref-color-pumpkin-400);
  --sinch-comp-color-swatch-color-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-color-swatch-color-pink-background: var(--sinch-ref-color-candy-400);
  --sinch-comp-color-swatch-color-red-background: var(--sinch-ref-color-raspberry-500);
  --sinch-comp-color-swatch-color-skintone-dark-background: #7C533E;
  --sinch-comp-color-swatch-color-skintone-default-background: #FFCC4D;
  --sinch-comp-color-swatch-color-skintone-light-background: #F7DECE;
  --sinch-comp-color-swatch-color-skintone-light-medium-background: #F3D2A2;
  --sinch-comp-color-swatch-color-skintone-medium-background: #D4AB88;
  --sinch-comp-color-swatch-color-skintone-medium-dark-background: #AF7E57;
  --sinch-comp-color-swatch-color-violet-background: var(--sinch-ref-color-violet-400);
  --sinch-comp-color-swatch-color-yellow-background: var(--sinch-ref-color-honey-400);
}

.nectary-theme-base {
  --sinch-comp-date-picker-day-color-checked-background-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-date-picker-day-color-checked-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-date-picker-day-color-checked-text-initial: var(--sinch-sys-color-basic-pure);
  --sinch-comp-date-picker-day-color-default-background-hover: #0060631A;
  --sinch-comp-date-picker-day-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-date-picker-day-color-default-border-initial: var(--sinch-sys-color-basic-transparent);
  --sinch-comp-date-picker-day-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-date-picker-day-color-default-range-background: #0060631A;
  --sinch-comp-date-picker-day-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-date-picker-day-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-date-picker-day-shape-radius: var(--sinch-comp-button-shape-radius-size-s);
  --sinch-comp-date-picker-font-day: var(--sinch-sys-font-body-xs);
  --sinch-comp-date-picker-font-header: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-date-picker-font-today: var(--sinch-sys-font-body-xs);
  --sinch-comp-date-picker-font-weekday: var(--sinch-sys-font-body-emphasize-xs);
  --sinch-comp-date-picker-header-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-date-picker-header-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-date-picker-today-color-checked-background-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-date-picker-today-color-checked-border-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-date-picker-today-color-checked-text-initial: var(--sinch-sys-color-basic-pure);
  --sinch-comp-date-picker-today-color-default-background-hover: #0060631A;
  --sinch-comp-date-picker-today-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-date-picker-today-color-default-border-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-date-picker-today-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-date-picker-today-color-disabled-border-initial: var(--sinch-sys-color-border-subtle);
  --sinch-comp-date-picker-today-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-date-picker-weekday-color-default-text-initial: var(--sinch-sys-color-text-default);
}

.nectary-theme-base {
  --sinch-comp-dialog-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-dialog-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-dialog-color-default-title-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-dialog-font-title: var(--sinch-sys-font-desktop-title-m);
  --sinch-comp-dialog-shadow: var(--sinch-ref-shadow-level-2);
  --sinch-comp-dialog-shape-radius: var(--sinch-sys-shape-radius-l);
}

.nectary-theme-base {
  --sinch-comp-emoji-picker-color-default-text-not-found: var(--sinch-sys-color-text-muted);
  --sinch-comp-emoji-picker-font-not-found: var(--sinch-sys-font-body-m);
}

.nectary-theme-base {
  --sinch-comp-field-color-default-additional-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-field-color-default-label-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-field-color-default-optional-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-field-color-disabled-additional-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-field-color-disabled-label-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-field-color-disabled-optional-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-field-color-invalid-text-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-field-font-additional: var(--sinch-sys-font-body-xs);
  --sinch-comp-field-font-invalid: var(--sinch-sys-font-body-xs);
  --sinch-comp-field-font-label: var(--sinch-sys-font-desktop-title-s);
  --sinch-comp-field-font-optional: var(--sinch-sys-font-body-s);
}

.nectary-theme-base {
  --sinch-comp-file-drop-color-default-background-active: var(--sinch-sys-color-feedback-info-subtle);
  --sinch-comp-file-drop-color-default-background-initial: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-file-drop-color-default-border-active: var(--sinch-sys-color-focus);
  --sinch-comp-file-drop-color-default-border-initial: var(--sinch-sys-color-border-strong);
  --sinch-comp-file-drop-color-default-placeholder-active: var(--sinch-sys-color-text-muted);
  --sinch-comp-file-drop-color-default-placeholder-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-file-drop-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-file-drop-color-disabled-border-initial: var(--sinch-sys-color-border-strong);
  --sinch-comp-file-drop-color-disabled-placeholder-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-file-drop-color-invalid-background-active: var(--sinch-sys-color-feedback-danger-subtle);
  --sinch-comp-file-drop-color-invalid-background-initial: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-file-drop-color-invalid-border-active: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-file-drop-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-file-drop-color-invalid-placeholder-active: var(--sinch-sys-color-text-muted);
  --sinch-comp-file-drop-color-invalid-placeholder-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-file-drop-font-placeholder: var(--sinch-sys-font-body-m);
  --sinch-comp-file-drop-shape-radius: var(--sinch-sys-shape-radius-l);
}

.nectary-theme-base {
  --sinch-comp-file-status-color-error-background: var(--sinch-sys-color-feedback-danger-subtle);
  --sinch-comp-file-status-color-error-icon: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-file-status-color-error-text: var(--sinch-sys-color-text-default);
  --sinch-comp-file-status-color-loading-background: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-file-status-color-loading-icon: var(--sinch-sys-color-text-default);
  --sinch-comp-file-status-color-loading-text: var(--sinch-sys-color-text-default);
  --sinch-comp-file-status-color-pending-background: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-file-status-color-pending-icon: var(--sinch-sys-color-text-default);
  --sinch-comp-file-status-color-pending-text: var(--sinch-sys-color-text-default);
  --sinch-comp-file-status-color-progress-background: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-file-status-color-progress-icon: var(--sinch-sys-color-text-default);
  --sinch-comp-file-status-color-progress-info: var(--sinch-sys-color-text-muted);
  --sinch-comp-file-status-color-progress-text: var(--sinch-sys-color-text-default);
  --sinch-comp-file-status-color-success-background: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-file-status-color-success-icon: var(--sinch-sys-color-feedback-success-default);
  --sinch-comp-file-status-color-success-text: var(--sinch-sys-color-text-default);
  --sinch-comp-file-status-font-body: var(--sinch-sys-font-body-m);
  --sinch-comp-file-status-font-info: var(--sinch-sys-font-body-m);
  --sinch-comp-file-status-font-title: var(--sinch-sys-font-desktop-title-s);
  --sinch-comp-file-status-shape-radius: var(--sinch-sys-shape-radius-l);
}

.nectary-theme-base {
  --sinch-comp-grid-columns-l: 12;
  --sinch-comp-grid-columns-m: 8;
  --sinch-comp-grid-columns-s: 4;
  --sinch-comp-grid-columns-xl: 12;
  --sinch-comp-grid-gutter-l: 24px;
  --sinch-comp-grid-gutter-m: 24px;
  --sinch-comp-grid-gutter-s: 16px;
  --sinch-comp-grid-gutter-xl: 24px;
  --sinch-comp-grid-margin-l: 24px;
  --sinch-comp-grid-margin-m: 24px;
  --sinch-comp-grid-margin-s: 16px;
  --sinch-comp-grid-margin-xl: 32px;
}

.nectary-theme-base {
  --sinch-comp-icon-channel-color-apple-business-chat-bg: linear-gradient(0deg, #0CBD2A 0%, #5BF675 100%);
  --sinch-comp-icon-channel-color-apple-business-chat-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-facebook-bg: linear-gradient(180deg, #1877F2 0%, #1877F2 100%);
  --sinch-comp-icon-channel-color-facebook-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-facebook-messenger-bg: linear-gradient(45deg, #09F 0%, #A033FF 45%, #FF5280 82%, #FF7061 100%);
  --sinch-comp-icon-channel-color-facebook-messenger-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-google-business-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --sinch-comp-icon-channel-color-google-business-layera: #EA4335;
  --sinch-comp-icon-channel-color-google-business-layerb: #FBBC05;
  --sinch-comp-icon-channel-color-google-business-layerc: #34A853;
  --sinch-comp-icon-channel-color-google-business-layerd: #4285F4;
  --sinch-comp-icon-channel-color-instagram-bg: linear-gradient(225deg, #4F3EB7 0%, #9132AE 19%, #CF288B 53%, #FFD43C 100%);
  --sinch-comp-icon-channel-color-instagram-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-line-bg: linear-gradient(180deg, #06C755 0%, #06C755 100%);
  --sinch-comp-icon-channel-color-line-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-mms-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --sinch-comp-icon-channel-color-mms-layera: #242424;
  --sinch-comp-icon-channel-color-mms-layerb: #242424;
  --sinch-comp-icon-channel-color-notify-bg: linear-gradient(180deg, #A7D7F7 0%, #A7D7F7 100%);
  --sinch-comp-icon-channel-color-notify-layera: #E44436;
  --sinch-comp-icon-channel-color-notify-layerb: #FFFFFF;
  --sinch-comp-icon-channel-color-notify-layerc: #0076BA;
  --sinch-comp-icon-channel-color-phone-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --sinch-comp-icon-channel-color-phone-layera: #242424;
  --sinch-comp-icon-channel-color-push-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --sinch-comp-icon-channel-color-push-layera: #242424;
  --sinch-comp-icon-channel-color-push-layerb: #242424;
  --sinch-comp-icon-channel-color-rcs-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --sinch-comp-icon-channel-color-rcs-layera: #242424;
  --sinch-comp-icon-channel-color-rcs-layerb: #242424;
  --sinch-comp-icon-channel-color-sms-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --sinch-comp-icon-channel-color-sms-layera: #242424;
  --sinch-comp-icon-channel-color-sms-layerb: #242424;
  --sinch-comp-icon-channel-color-talk-bg: linear-gradient(180deg, #FFE812 0%, #FFE812 100%);
  --sinch-comp-icon-channel-color-talk-layera: #000000;
  --sinch-comp-icon-channel-color-telegram-bg: linear-gradient(180deg, #25A2E0 0%, #25A2E0 100%);
  --sinch-comp-icon-channel-color-telegram-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-twitter-bg: linear-gradient(180deg, #1D9BF0 0%, #1D9BF0 100%);
  --sinch-comp-icon-channel-color-twitter-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-viber-bg: linear-gradient(180deg, #7360F2 0%, #7360F2 100%);
  --sinch-comp-icon-channel-color-viber-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-webchat-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --sinch-comp-icon-channel-color-webchat-layera: #242424;
  --sinch-comp-icon-channel-color-webchat-layerb: #242424;
  --sinch-comp-icon-channel-color-wechat-bg: linear-gradient(180deg, #2DC100 0%, #2DC100 100%);
  --sinch-comp-icon-channel-color-wechat-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-whatsapp-bg: linear-gradient(180deg, #25D366 0%, #25D366 100%);
  --sinch-comp-icon-channel-color-whatsapp-layera: #FFFFFF;
  --sinch-comp-icon-channel-color-x-bg: linear-gradient(180deg, #000000 0%, #000000 100%);
  --sinch-comp-icon-channel-color-x-layera: #FFFFFF;
  --sinch-comp-icon-channel-size: var(--sinch-sys-size-l);
}

.nectary-theme-base {
  --sinch-comp-inline-alert-color-error-default-background: var(--sinch-sys-color-feedback-danger-subtle);
  --sinch-comp-inline-alert-color-error-default-icon: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-inline-alert-color-error-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-inline-alert-color-info-default-background: var(--sinch-sys-color-feedback-info-subtle);
  --sinch-comp-inline-alert-color-info-default-icon: var(--sinch-sys-color-feedback-info-default);
  --sinch-comp-inline-alert-color-info-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-inline-alert-color-success-default-background: var(--sinch-sys-color-feedback-success-subtle);
  --sinch-comp-inline-alert-color-success-default-icon: var(--sinch-sys-color-feedback-success-default);
  --sinch-comp-inline-alert-color-success-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-inline-alert-color-warning-default-background: var(--sinch-sys-color-feedback-warning-subtle);
  --sinch-comp-inline-alert-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-default);
  --sinch-comp-inline-alert-color-warning-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-inline-alert-font-body: var(--sinch-sys-font-body-m);
  --sinch-comp-inline-alert-font-title: var(--sinch-sys-font-desktop-title-s);
  --sinch-comp-inline-alert-shape-radius: var(--sinch-sys-shape-radius-l);
}

.nectary-theme-base {
  --sinch-comp-input-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-input-color-default-border-focus: var(--sinch-sys-color-focus);
  --sinch-comp-input-color-default-border-initial: var(--sinch-sys-color-border-strong);
  --sinch-comp-input-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-input-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-input-color-default-text-placeholder: var(--sinch-sys-color-text-muted);
  --sinch-comp-input-color-disabled-border-initial: var(--sinch-sys-color-border-disabled);
  --sinch-comp-input-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-input-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-input-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-input-font-input: var(--sinch-sys-font-body-m);
  --sinch-comp-input-font-placeholder: var(--sinch-sys-font-body-m);
  --sinch-comp-input-shape-radius-size-l: var(--sinch-sys-shape-radius-l);
  --sinch-comp-input-shape-radius-size-m: var(--sinch-sys-shape-radius-m);
  --sinch-comp-input-shape-radius-size-s: var(--sinch-sys-shape-radius-s);
  --sinch-comp-input-size-container-l: var(--sinch-sys-size-l);
  --sinch-comp-input-size-container-m: var(--sinch-sys-size-m);
  --sinch-comp-input-size-container-s: var(--sinch-sys-size-s);
  --sinch-comp-input-size-icon-l: 24px;
  --sinch-comp-input-size-icon-m: 24px;
  --sinch-comp-input-size-icon-s: 24px;
  --sinch-comp-input-spacing-icon-gap-l: 8px;
  --sinch-comp-input-spacing-icon-gap-m: 8px;
  --sinch-comp-input-spacing-icon-gap-s: 8px;
  --sinch-comp-input-spacing-padding-l: 12px;
  --sinch-comp-input-spacing-padding-m: 12px;
  --sinch-comp-input-spacing-padding-s: 12px;
  --sinch-comp-input-spacing-slot-gap-l: 4px;
  --sinch-comp-input-spacing-slot-gap-m: 4px;
  --sinch-comp-input-spacing-slot-gap-s: 4px;
  --sinch-comp-input-spacing-slot-padding-l: 4px;
  --sinch-comp-input-spacing-slot-padding-m: 4px;
  --sinch-comp-input-spacing-slot-padding-s: 4px;
}

.nectary-theme-base {
  --sinch-comp-link-color-default-icon-hover: var(--sinch-sys-color-primary-hover);
  --sinch-comp-link-color-default-icon-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-link-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-link-color-default-text-hover: var(--sinch-sys-color-primary-hover);
  --sinch-comp-link-color-default-text-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-link-color-disabled-icon-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-link-color-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-link-default-font-initial: var(--sinch-sys-font-body-link);
  --sinch-comp-link-default-text-decoration-disabled: none;
  --sinch-comp-link-default-text-decoration-hover: none;
  --sinch-comp-link-default-text-decoration-initial: var(--sinch-ref-typography-text-decoration-underline);
  --sinch-comp-link-standalone-font-initial: var(--sinch-sys-font-body-emphasize);
}

.nectary-theme-base {
  --sinch-comp-list-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-list-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-list-color-default-border-initial: var(--sinch-sys-color-border-subtle);
}

.nectary-theme-base {
  --sinch-comp-pagination-color-checked-background-hover: var(--sinch-sys-color-surface-transparent-active);
  --sinch-comp-pagination-color-checked-background-initial: var(--sinch-sys-color-surface-transparent-active);
  --sinch-comp-pagination-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-pagination-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-pagination-color-default-icon-default: var(--sinch-sys-color-text-default);
  --sinch-comp-pagination-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-pagination-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-pagination-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-pagination-font-checked-page-number: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-pagination-font-default-page-number: var(--sinch-sys-font-body-m);
  --sinch-comp-pagination-shape-radius: var(--sinch-sys-shape-radius-s);
}

.nectary-theme-base {
  --sinch-comp-popover-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-popover-color-default-border-initial: var(--sinch-sys-color-border-subtle);
  --sinch-comp-popover-shadow: var(--sinch-ref-shadow-level-2);
  --sinch-comp-popover-shape-radius: var(--sinch-sys-shape-radius-m);
}

.nectary-theme-base {
  --sinch-comp-progress-color-default-background-initial: #00606333;
  --sinch-comp-progress-color-default-bar-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-progress-color-default-text-initial: var(--sinch-sys-color-text-default);
}

.nectary-theme-base {
  --sinch-comp-progress-stepper-step-color-complete-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-progress-stepper-step-color-complete-label-default: var(--sinch-sys-color-text-muted);
  --sinch-comp-progress-stepper-step-color-complete-progress-background: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-progress-stepper-step-color-complete-progress-bar: var(--sinch-sys-color-primary-default);
  --sinch-comp-progress-stepper-step-color-complete-current-label-default: var(--sinch-sys-color-text-default);
  --sinch-comp-progress-stepper-step-color-inactive-label-default: var(--sinch-sys-color-text-disabled);
  --sinch-comp-progress-stepper-step-color-inactive-progress-background: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-progress-stepper-step-color-incomplete-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-progress-stepper-step-color-incomplete-label-default: var(--sinch-sys-color-text-muted);
  --sinch-comp-progress-stepper-step-color-incomplete-progress-background: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-progress-stepper-step-color-incomplete-progress-bar: var(--sinch-sys-color-primary-default);
  --sinch-comp-progress-stepper-step-color-incomplete-current-label-default: var(--sinch-sys-color-text-default);
  --sinch-comp-progress-stepper-step-color-invalid-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-progress-stepper-step-color-invalid-icon-default: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-progress-stepper-step-color-invalid-label-default: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-progress-stepper-step-color-invalid-progress-background: var(--sinch-sys-color-feedback-danger-subtle);
  --sinch-comp-progress-stepper-step-color-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-progress-stepper-step-font-complete-label: var(--sinch-sys-font-body-m);
  --sinch-comp-progress-stepper-step-font-complete-current-label: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-progress-stepper-step-font-inactive-label: var(--sinch-sys-font-body-m);
  --sinch-comp-progress-stepper-step-font-incomplete-label: var(--sinch-sys-font-body-m);
  --sinch-comp-progress-stepper-step-font-incomplete-current-label: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-progress-stepper-step-font-invalid-label: var(--sinch-sys-font-body-m);
  --sinch-comp-progress-stepper-step-font-invalid-current-label: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-progress-stepper-step-shape-radius: var(--sinch-sys-shape-radius-m);
}

.nectary-theme-base {
  --sinch-comp-radio-color-checked-border-active: var(--sinch-sys-color-border-strong);
  --sinch-comp-radio-color-checked-border-hover: var(--sinch-sys-color-border-strong);
  --sinch-comp-radio-color-checked-border-initial: var(--sinch-sys-color-border-strong);
  --sinch-comp-radio-color-checked-knob-active: var(--sinch-sys-color-primary-active);
  --sinch-comp-radio-color-checked-knob-hover: var(--sinch-sys-color-primary-hover);
  --sinch-comp-radio-color-checked-knob-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-radio-color-checked-disabled-border-initial: var(--sinch-sys-color-border-disabled);
  --sinch-comp-radio-color-checked-disabled-knob-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-radio-color-checked-disabled-label-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-radio-color-default-background-active: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-radio-color-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-radio-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-radio-color-default-border-active: var(--sinch-sys-color-border-strong);
  --sinch-comp-radio-color-default-border-hover: var(--sinch-sys-color-border-strong);
  --sinch-comp-radio-color-default-border-initial: var(--sinch-sys-color-border-strong);
  --sinch-comp-radio-color-default-label-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-radio-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-radio-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-radio-color-disabled-border-initial: var(--sinch-sys-color-border-disabled);
  --sinch-comp-radio-color-disabled-label-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-radio-color-invalid-background-active: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-radio-color-invalid-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-radio-color-invalid-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-radio-color-invalid-border-active: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-radio-color-invalid-border-hover: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-radio-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-radio-color-invalid-label-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-radio-direction: column;
  --sinch-comp-radio-font-label: var(--sinch-sys-font-body-m);
  --sinch-comp-radio-gap: 8px;
}

.nectary-theme-base {
  --sinch-comp-segmented-control-color-checked-background-initial: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-segmented-control-color-checked-border-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-segmented-control-color-checked-icon-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-segmented-control-color-checked-text-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-segmented-control-color-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-segmented-control-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-segmented-control-color-default-border-initial: var(--sinch-sys-color-border-default);
  --sinch-comp-segmented-control-color-default-icon-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-segmented-control-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-segmented-control-color-default-text-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-segmented-control-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-segmented-control-color-disabled-border-initial: var(--sinch-sys-color-border-default);
  --sinch-comp-segmented-control-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-segmented-control-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-segmented-control-font-label: var(--sinch-sys-font-body-m);
  --sinch-comp-segmented-control-shape-radius: var(--sinch-sys-shape-radius-s);
  --sinch-comp-segmented-control-size-icon: var(--sinch-sys-size-xs);
}

.nectary-theme-base {
  --sinch-comp-select-button-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-select-button-color-default-border-focus: var(--sinch-sys-color-focus);
  --sinch-comp-select-button-color-default-border-initial: var(--sinch-sys-color-border-strong);
  --sinch-comp-select-button-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-select-button-color-default-placeholder-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-select-button-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-select-button-color-disabled-border-initial: var(--sinch-sys-color-border-disabled);
  --sinch-comp-select-button-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-select-button-color-disabled-placeholder-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-select-button-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-select-button-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-select-button-font-input: var(--sinch-sys-font-body-m);
  --sinch-comp-select-button-font-placeholder: var(--sinch-sys-font-body-m);
  --sinch-comp-select-button-shape-radius-size-l: var(--sinch-sys-shape-radius-l);
  --sinch-comp-select-button-shape-radius-size-m: var(--sinch-sys-shape-radius-m);
  --sinch-comp-select-button-shape-radius-size-s: var(--sinch-sys-shape-radius-s);
  --sinch-comp-select-button-size-container-l: var(--sinch-sys-size-l);
  --sinch-comp-select-button-size-container-m: var(--sinch-sys-size-m);
  --sinch-comp-select-button-size-container-s: var(--sinch-sys-size-s);
  --sinch-comp-select-button-size-icon-l: 24px;
  --sinch-comp-select-button-size-icon-m: 24px;
  --sinch-comp-select-button-size-icon-s: 24px;
  --sinch-comp-select-button-spacing-gap-l: 8px;
  --sinch-comp-select-button-spacing-gap-m: 8px;
  --sinch-comp-select-button-spacing-gap-s: 8px;
  --sinch-comp-select-button-spacing-left-slot-gap-l: 4px;
  --sinch-comp-select-button-spacing-left-slot-gap-m: 4px;
  --sinch-comp-select-button-spacing-left-slot-gap-s: 4px;
  --sinch-comp-select-button-spacing-left-slot-offset-l: -4px;
  --sinch-comp-select-button-spacing-left-slot-offset-m: -4px;
  --sinch-comp-select-button-spacing-left-slot-offset-s: -4px;
  --sinch-comp-select-button-spacing-padding-left-l: 12px;
  --sinch-comp-select-button-spacing-padding-left-m: 12px;
  --sinch-comp-select-button-spacing-padding-left-s: 12px;
  --sinch-comp-select-button-spacing-padding-right-l: 12px;
  --sinch-comp-select-button-spacing-padding-right-m: 8px;
  --sinch-comp-select-button-spacing-padding-right-s: 4px;
}

.nectary-theme-base {
  --sinch-comp-select-menu-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-select-menu-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-select-menu-color-default-background-selected: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-select-menu-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-select-menu-color-default-not-found-text-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-select-menu-color-default-option-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-select-menu-color-default-title-initial: var(--sinch-ref-color-neutral-400);
  --sinch-comp-select-menu-color-disabled-background-initial: var(--sinch-sys-color-surface-transparent-disabled);
  --sinch-comp-select-menu-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-select-menu-color-disabled-option-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-select-menu-font-max-height: 85vh;
  --sinch-comp-select-menu-font-not-found-text: var(--sinch-sys-font-body-m);
  --sinch-comp-select-menu-font-option: var(--sinch-sys-font-body-m);
  --sinch-comp-select-menu-size-icon: var(--sinch-sys-size-xs);
}

.nectary-theme-base {
  --sinch-comp-sheet-animation-duration: 750ms;
  --sinch-comp-sheet-animation-easing: cubic-bezier(0.25, 1, 0.5, 1);
  --sinch-comp-sheet-color-backdrop-from: #14181C66;
  --sinch-comp-sheet-color-backdrop-to: #14181C99;
  --sinch-comp-sheet-color-background: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-sheet-color-description: var(--sinch-sys-color-text-caption);
  --sinch-comp-sheet-color-title: var(--sinch-sys-color-text-default);
  --sinch-comp-sheet-font-description: var(--sinch-sys-font-body-m);
  --sinch-comp-sheet-font-title: var(--sinch-sys-font-desktop-title-l);
  --sinch-comp-sheet-size-backdrop-blur: 2px;
  --sinch-comp-sheet-size-gap: 16px;
  --sinch-comp-sheet-size-max-horizontal: 400px;
  --sinch-comp-sheet-size-max-vertical: 85vh;
  --sinch-comp-sheet-size-padding: 16px;
}

.nectary-theme-base {
  --sinch-comp-tab-color-checked-border-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-tab-color-checked-icon-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-tab-color-checked-text-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-tab-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
  --sinch-comp-tab-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-tab-color-default-border-initial: var(--sinch-sys-color-border-default);
  --sinch-comp-tab-color-default-icon-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-tab-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-tab-color-default-text-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-tab-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-tab-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-tab-font-label: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-tab-shape-radius: var(--sinch-sys-shape-radius-l);
  --sinch-comp-tab-size-icon: 16px;
}

.nectary-theme-base {
  --sinch-comp-table-color-cell-default-border-initial: var(--sinch-sys-color-border-subtle);
  --sinch-comp-table-color-head-cell-default-border-initial: var(--sinch-sys-color-border-default);
  --sinch-comp-table-color-head-cell-default-icon-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-table-color-head-cell-default-text-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-table-color-head-cell-sorted-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-table-color-head-cell-sorted-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-table-color-row-checked-background-initial: var(--sinch-sys-color-surface-primary-active);
  --sinch-comp-table-color-row-default-background-hightlited: var(--sinch-ref-color-honey-50);
  --sinch-comp-table-color-row-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
  --sinch-comp-table-color-row-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
  --sinch-comp-table-color-row-default-background-sticky: var(--sinch-sys-color-surface-primary-default);
}

.nectary-theme-base {
  --sinch-comp-tag-border: var(--sinch-sys-color-basic-pure);
  --sinch-comp-tag-color-blue-background: var(--sinch-ref-color-ocean-700);
  --sinch-comp-tag-color-blue-foreground: var(--sinch-ref-color-ocean-50);
  --sinch-comp-tag-color-danger-background: var(--sinch-sys-color-feedback-danger-subtle);
  --sinch-comp-tag-color-danger-foreground: var(--sinch-sys-color-feedback-danger-strong);
  --sinch-comp-tag-color-dark-blue-background: var(--sinch-ref-color-ocean-800);
  --sinch-comp-tag-color-dark-blue-foreground: var(--sinch-ref-color-ocean-100);
  --sinch-comp-tag-color-dark-gray-background: var(--sinch-ref-color-neutral-800);
  --sinch-comp-tag-color-dark-gray-foreground: var(--sinch-ref-color-neutral-200);
  --sinch-comp-tag-color-dark-green-background: var(--sinch-ref-color-grass-800);
  --sinch-comp-tag-color-dark-green-foreground: var(--sinch-ref-color-grass-100);
  --sinch-comp-tag-color-dark-orange-background: var(--sinch-ref-color-pumpkin-700);
  --sinch-comp-tag-color-dark-orange-foreground: var(--sinch-ref-color-pumpkin-100);
  --sinch-comp-tag-color-dark-pink-background: var(--sinch-ref-color-candy-800);
  --sinch-comp-tag-color-dark-pink-foreground: var(--sinch-ref-color-candy-100);
  --sinch-comp-tag-color-dark-red-background: var(--sinch-ref-color-raspberry-800);
  --sinch-comp-tag-color-dark-red-foreground: var(--sinch-ref-color-raspberry-100);
  --sinch-comp-tag-color-dark-violet-background: var(--sinch-ref-color-violet-800);
  --sinch-comp-tag-color-dark-violet-foreground: var(--sinch-ref-color-violet-100);
  --sinch-comp-tag-color-dark-yellow-background: var(--sinch-ref-color-honey-600);
  --sinch-comp-tag-color-dark-yellow-foreground: var(--sinch-ref-color-honey-100);
  --sinch-comp-tag-color-default-background: var(--sinch-ref-color-neutral-200);
  --sinch-comp-tag-color-default-foreground: var(--sinch-ref-color-neutral-900);
  --sinch-comp-tag-color-gray-background: var(--sinch-ref-color-neutral-700);
  --sinch-comp-tag-color-gray-foreground: var(--sinch-ref-color-neutral-100);
  --sinch-comp-tag-color-green-background: var(--sinch-ref-color-grass-600);
  --sinch-comp-tag-color-green-foreground: var(--sinch-ref-color-grass-50);
  --sinch-comp-tag-color-info-background: var(--sinch-sys-color-feedback-info-subtle);
  --sinch-comp-tag-color-info-foreground: var(--sinch-sys-color-feedback-info-strong);
  --sinch-comp-tag-color-light-blue-background: var(--sinch-ref-color-ocean-100);
  --sinch-comp-tag-color-light-blue-foreground: var(--sinch-ref-color-ocean-800);
  --sinch-comp-tag-color-light-gray-background: var(--sinch-ref-color-neutral-200);
  --sinch-comp-tag-color-light-gray-foreground: var(--sinch-ref-color-neutral-800);
  --sinch-comp-tag-color-light-green-background: var(--sinch-ref-color-grass-200);
  --sinch-comp-tag-color-light-green-foreground: var(--sinch-ref-color-grass-700);
  --sinch-comp-tag-color-light-orange-background: var(--sinch-ref-color-pumpkin-200);
  --sinch-comp-tag-color-light-orange-foreground: var(--sinch-ref-color-pumpkin-700);
  --sinch-comp-tag-color-light-pink-background: var(--sinch-ref-color-candy-200);
  --sinch-comp-tag-color-light-pink-foreground: var(--sinch-ref-color-candy-700);
  --sinch-comp-tag-color-light-red-background: var(--sinch-ref-color-raspberry-200);
  --sinch-comp-tag-color-light-red-foreground: var(--sinch-ref-color-raspberry-700);
  --sinch-comp-tag-color-light-violet-background: var(--sinch-ref-color-violet-200);
  --sinch-comp-tag-color-light-violet-foreground: var(--sinch-ref-color-violet-700);
  --sinch-comp-tag-color-light-yellow-background: var(--sinch-ref-color-honey-200);
  --sinch-comp-tag-color-light-yellow-foreground: var(--sinch-ref-color-honey-700);
  --sinch-comp-tag-color-orange-background: var(--sinch-ref-color-pumpkin-400);
  --sinch-comp-tag-color-orange-foreground: var(--sinch-ref-color-pumpkin-800);
  --sinch-comp-tag-color-pink-background: var(--sinch-ref-color-candy-600);
  --sinch-comp-tag-color-pink-foreground: var(--sinch-ref-color-candy-50);
  --sinch-comp-tag-color-red-background: var(--sinch-ref-color-raspberry-600);
  --sinch-comp-tag-color-red-foreground: var(--sinch-ref-color-raspberry-50);
  --sinch-comp-tag-color-success-background: var(--sinch-sys-color-feedback-success-subtle);
  --sinch-comp-tag-color-success-foreground: var(--sinch-sys-color-feedback-success-strong);
  --sinch-comp-tag-color-violet-background: var(--sinch-ref-color-violet-600);
  --sinch-comp-tag-color-violet-foreground: var(--sinch-ref-color-violet-50);
  --sinch-comp-tag-color-warning-background: var(--sinch-sys-color-feedback-warning-subtle);
  --sinch-comp-tag-color-warning-foreground: var(--sinch-sys-color-feedback-warning-strong);
  --sinch-comp-tag-color-yellow-background: var(--sinch-ref-color-honey-350);
  --sinch-comp-tag-color-yellow-foreground: var(--sinch-ref-color-honey-900);
  --sinch-comp-tag-font-size-m-label: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-12)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
  --sinch-comp-tag-font-size-s-label: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-10)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
  --sinch-comp-tag-shape-radius: var(--sinch-sys-shape-radius-full);
  --sinch-comp-tag-size-container-m: 24px;
  --sinch-comp-tag-size-container-s: 20px;
  --sinch-comp-tag-size-icon-m: 16px;
  --sinch-comp-tag-size-icon-s: 14px;
}

.nectary-theme-base {
  --sinch-comp-textarea-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-textarea-color-default-border-focus: var(--sinch-sys-color-focus);
  --sinch-comp-textarea-color-default-border-initial: var(--sinch-sys-color-border-strong);
  --sinch-comp-textarea-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-textarea-color-default-text-placeholder: var(--sinch-sys-color-text-muted);
  --sinch-comp-textarea-color-disabled-border-initial: var(--sinch-sys-color-border-disabled);
  --sinch-comp-textarea-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-textarea-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-textarea-font-input: var(--sinch-sys-font-body-m);
  --sinch-comp-textarea-shape-radius: var(--sinch-comp-button-shape-radius-size-m);
  --sinch-comp-textarea-size-resize-handle: 20px;
}

.nectary-theme-base {
  --sinch-comp-time-picker-digit-color-checked-h12-default: var(--sinch-sys-color-primary-default);
  --sinch-comp-time-picker-digit-color-checked-h24-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-time-picker-digit-color-checked-minute-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-time-picker-digit-color-default-h12-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-time-picker-digit-color-default-h24-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-time-picker-digit-color-default-minute-initial: var(--sinch-sys-color-text-muted);
  --sinch-comp-time-picker-digit-font-checked-h12: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-time-picker-digit-font-checked-h24: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-time-picker-digit-font-checked-minutes: var(--sinch-sys-font-body-emphasize);
  --sinch-comp-time-picker-digit-font-default-h12: var(--sinch-sys-font-body-s);
  --sinch-comp-time-picker-digit-font-default-h24: var(--sinch-sys-font-body-xs);
  --sinch-comp-time-picker-digit-font-default-minutes: var(--sinch-sys-font-body-xs);
  --sinch-comp-time-picker-header-color-default-icon-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-time-picker-header-color-default-text-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-time-picker-header-font: var(--sinch-sys-font-desktop-title-xl);
  --sinch-comp-time-picker-needle-color-default-background-focus: var(--sinch-sys-color-primary-default);
  --sinch-comp-time-picker-needle-color-default-background-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-time-picker-watch-face-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-time-picker-watch-face-color-default-border-initial: var(--sinch-sys-color-text-default);
}

.nectary-theme-base {
  --sinch-comp-toast-color-error-default-background: var(--sinch-sys-color-feedback-danger-subtle);
  --sinch-comp-toast-color-error-default-icon: var(--sinch-sys-color-feedback-danger-default);
  --sinch-comp-toast-color-error-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-toast-color-info-default-background: var(--sinch-sys-color-feedback-info-subtle);
  --sinch-comp-toast-color-info-default-icon: var(--sinch-sys-color-feedback-info-default);
  --sinch-comp-toast-color-info-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-toast-color-success-default-background: var(--sinch-sys-color-feedback-success-subtle);
  --sinch-comp-toast-color-success-default-icon: var(--sinch-sys-color-feedback-success-default);
  --sinch-comp-toast-color-success-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-toast-color-warning-default-background: var(--sinch-sys-color-feedback-warning-subtle);
  --sinch-comp-toast-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-default);
  --sinch-comp-toast-color-warning-default-text: var(--sinch-sys-color-text-default);
  --sinch-comp-toast-font-body: var(--sinch-sys-font-body-m);
  --sinch-comp-toast-shadow: var(--sinch-ref-shadow-level-2);
  --sinch-comp-toast-shape-radius: var(--sinch-sys-shape-radius-l);
}

.nectary-theme-base {
  --sinch-comp-toggle-color-checked-background-initial: var(--sinch-sys-color-primary-default);
  --sinch-comp-toggle-color-checked-disabled-background-initial: var(--sinch-sys-color-primary-disabled);
  --sinch-comp-toggle-color-default-background-initial: var(--sinch-ref-color-neutral-600);
  --sinch-comp-toggle-color-default-knob-background-initial: var(--sinch-sys-color-surface-primary-default);
  --sinch-comp-toggle-color-default-label-initial: var(--sinch-sys-color-text-default);
  --sinch-comp-toggle-color-default-outline-focus: var(--sinch-sys-color-focus);
  --sinch-comp-toggle-color-default-text-inside-initial: var(--sinch-sys-color-basic-pure);
  --sinch-comp-toggle-color-disabled-background-initial: var(--sinch-ref-color-neutral-100);
  --sinch-comp-toggle-color-disabled-label-initial: var(--sinch-sys-color-text-disabled);
  --sinch-comp-toggle-font-size-m-inside-text: var(--sinch-sys-font-body-xxs);
  --sinch-comp-toggle-font-size-m-label: var(--sinch-sys-font-body-m);
  --sinch-comp-toggle-font-size-s-label: var(--sinch-sys-font-body-s);
  --sinch-comp-toggle-shadow-knob-default: var(--sinch-ref-shadow-level-1);
  --sinch-comp-toggle-shadow-knob-disabled: var(--sinch-ref-shadow-level-0);
}

.nectary-theme-base {
  --sinch-comp-tooltip-color-background: var(--sinch-sys-color-surface-secondary-default);
  --sinch-comp-tooltip-color-text: var(--sinch-sys-color-text-default);
  --sinch-comp-tooltip-font-body: var(--sinch-sys-font-body-xs);
  --sinch-comp-tooltip-shadow: var(--sinch-ref-shadow-level-1);
  --sinch-comp-tooltip-shape-radius: var(--sinch-sys-shape-radius-xs);
}

.nectary-theme-base {
  /* --sinch-emoji-src-url: "https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/%s.svg"; */
  --sinch-emoji-src-url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/%s.svg";
}

.nectary-theme-base {
  --sinch-flag-src-url: "https://flagcdn.com/%s.svg";
}

.nectary-theme-base {
  /* Font */
  --sinch-comp-icon-font-family: "Material Icons";
  --sinch-comp-icon-font-feature-settings: "liga";
  --sinch-comp-icon-font-weight: 400;
  --sinch-comp-icon-font-family-zero-to-d: "Sinch Icons Zero To D";
  --sinch-comp-icon-font-family-e-to-o: "Sinch Icons E To O";
  --sinch-comp-icon-font-family-p-to-z: "Sinch Icons P To Z";
}

/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color-default);
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #555;
  --xy-background-pattern-lines-color-default: #333;
  --xy-background-pattern-cross-color-default: #333;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-default);
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  touch-action: none;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke-default);
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width-default);
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke-default);
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width-default);
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected-default);
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke-default);
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke-default);
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color-default);
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color-default);
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color-default);
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(--xy-minimap-background-color-default);
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(--xy-minimap-mask-background-color-default);
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(--xy-minimap-mask-stroke-color-default);
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(--xy-minimap-mask-stroke-width-default);
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(--xy-minimap-node-background-color-default);
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(--xy-minimap-node-stroke-color-default);
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(--xy-minimap-node-stroke-width-default);
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(--xy-background-pattern-dots-color-default);
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(--xy-background-pattern-lines-color-default);
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(--xy-background-pattern-cross-color-default);
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow-default);
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color-default);
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(--xy-controls-button-border-color-default);
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(--xy-controls-button-color-default);
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius-default);
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color-default);
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border-default);
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color-default);
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover-default);
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected-default);
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color-default);
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color-default);
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border-default);
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(--xy-controls-button-background-color-hover-default);
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(--xy-controls-button-color-hover-default);
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(--xy-controls-button-border-color-default);
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color-default);
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color-default);
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color-default);
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color-default);
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}