@3dsource/source-ui 0.0.1

package/styles/material/select.scss

@@ -0,0 +1,97 @@
+@use '@angular/material' as mat;
+
+// Customize the entire app. Change :root to your selector if you want to scope the styles.
+:root {
+  @include mat.select-overrides(
+    (
+      // panel-background-color: orange,
+      panel-background-color: var(--src-color-bg-default),
+      enabled-trigger-text-color: var(--src-color-text-default),
+      enabled-arrow-color: var(--src-color-icon-default),
+      disabled-arrow-color: var(--src-color-icon-default-disabled),
+      focused-arrow-color: var(--src-color-icon-primary),
+      invalid-arrow-color: var(--src-color-icon-default),
+      container-elevation-shadow: var(--src-shadow-large),
+      trigger-text-size: var(--src-fs-base, 14px),
+      trigger-text-line-height: var(--src-lh-base, 20px),
+      placeholder-text-color: var(--src-color-text-subdued)
+    )
+  );
+
+  @include mat.core-overrides(
+    (
+      option-selected-state-layer-color: var(--src-color-bg-default-active),
+      option-selected-state-label-text-color: var(--src-color-text-default),
+      option-hover-state-layer-color: var(--src-color-bg-default-hover),
+      option-focus-state-layer-color: var(--src-color-bg-default-hover),
+    )
+  );
+}
+
+.mat-mdc-form-field {
+  --mat-mdc-form-field-floating-label-scale: 1;
+  width: 100%;
+}
+.mdc-text-field {
+  // --mat-form-field-container-height: auto;
+
+  // --mat-form-field-container-vertical-padding: 8px;
+  // --mat-form-field-container-height:
+}
+
+// Custom additional styling for select panel
+.src-select-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.src-select-panel__header,
+.src-panel__footer {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.src-select-panel__body {
+  max-height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  scrollbar-color: var(--src-color-border-strong)
+    var(--src-color-border-default);
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--src-color-border-default);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--src-color-border-strong);
+    outline: none;
+  }
+}
+
+.mat-mdc-option.src-list__item {
+  // min-height: 48px;
+  display: flex;
+  min-height: initial;
+  padding: 8px;
+
+  .mat-pseudo-checkbox.mat-mdc-option-pseudo-checkbox.mat-pseudo-checkbox-minimal {
+    --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
+      --src-color-icon-primary
+    );
+  }
+
+  &.mat-mdc-option-multiple {
+    --mdc-list-list-item-selected-container-color: var(
+      --src-color-bg-default-active
+    );
+    &.mdc-list-item--selected {
+      background-color: var(--mdc-list-list-item-selected-container-color);
+    }
+  }
+}

package/styles/material/theme.scss

@@ -0,0 +1,328 @@
+@use '@angular/material' as mat;
+/* Note: Color palettes are generated from primary: #017BFF, neutral: #fff, error: #C5280C */
+:root {
+  /* COLOR SYSTEM VARIABLES */
+  color-scheme: light;
+  /* Primary palette variables */
+  // --mat-sys-primary: light-dark(var(--src-color-brand-500), #adc7ff);
+  --mat-sys-primary: light-dark(#017bff, #adc7ff);
+  --mat-sys-on-primary: light-dark(var(--src-color-text-inverse), #002e68);
+  --mat-sys-primary-container: light-dark(var(--src-color-bg-primary), #004493);
+  --mat-sys-on-primary-container: light-dark(
+    var(--src-color-text-inverse),
+    #d8e2ff
+  );
+  // --mat-sys-inverse-primary: light-dark(#adc7ff, #017BFF);
+  // --mat-sys-primary-fixed: light-dark(#d8e2ff, #d8e2ff);
+  // --mat-sys-primary-fixed-dim: light-dark(#adc7ff, #adc7ff);
+  // --mat-sys-on-primary-fixed: light-dark(#001a41, #001a41);
+  // --mat-sys-on-primary-fixed-variant: light-dark(#004493, #004493);
+
+  /* Secondary palette variables - like in toastr */
+  --mat-sys-secondary: light-dark(#0d1825, #adc7ff);
+  --mat-sys-on-secondary: light-dark(var(--src-color-text-inverse), #082f64);
+  --mat-sys-secondary-container: light-dark(#2d3745, #26467c);
+  --mat-sys-on-secondary-container: light-dark(
+    var(--src-color-text-inverse),
+    #d8e2ff
+  );
+  // --mat-sys-secondary-fixed: light-dark(#d8e2ff, #d8e2ff);
+  // --mat-sys-secondary-fixed-dim: light-dark(#adc7ff, #adc7ff);
+  // --mat-sys-on-secondary-fixed: light-dark(#001a41, #001a41);
+  // --mat-sys-on-secondary-fixed-variant: light-dark(#26467c, #26467c);
+
+  /* Tertiary palette variables */
+  --mat-sys-tertiary: light-dark(var(--src-color-green-700), #eeb0ff);
+  --mat-sys-on-tertiary: light-dark(var(--src-color-text-inverse), #53006e);
+  --mat-sys-tertiary-container: light-dark(var(--src-color-green-500), #750699);
+  --mat-sys-on-tertiary-container: light-dark(
+    var(--src-color-text-inverse),
+    #fad7ff
+  );
+  // --mat-sys-tertiary-fixed: light-dark(#fad7ff, #fad7ff);
+  // --mat-sys-tertiary-fixed-dim: light-dark(#eeb0ff, #eeb0ff);
+  // --mat-sys-on-tertiary-fixed: light-dark(#330045, #330045);
+  // --mat-sys-on-tertiary-fixed-variant: light-dark(#750699, #750699);
+
+  /* Neutral palette variables */
+  --mat-sys-background: light-dark(var(--src-color-bg-default), #1f2937);
+  --mat-sys-on-background: light-dark(var(--src-color-text-default), #e2e2e2);
+  --mat-sys-surface: light-dark(var(--src-color-bg-default-subdued), #1f2937);
+  // --mat-sys-surface-dim: light-dark(#dadada, #1F2937);
+  // --mat-sys-surface-bright: light-dark(#f9f9f9, #37393a);
+  // --mat-sys-surface-container-lowest: light-dark(#ffffff, #0c0f0f);
+  // --mat-sys-surface-container: light-dark(#eeeeee, #1e2020);
+  // --mat-sys-surface-container-high: light-dark(#e8e8e8, #282a2b);
+  // --mat-sys-surface-container-highest: light-dark(#e2e2e2, #333535);
+  --mat-sys-on-surface: light-dark(var(--src-color-text-default), #e2e2e2);
+  --mat-sys-shadow: light-dark(#000000, #000000);
+  --mat-sys-scrim: light-dark(#000000, #000000);
+  --mat-sys-surface-tint: light-dark(#017bff, #adc7ff);
+  // --mat-sys-inverse-surface: light-dark(#2f3131, #e2e2e2);
+  // --mat-sys-inverse-on-surface: light-dark(#f0f1f1, #2f3131);
+  --mat-sys-outline: light-dark(var(--src-color-border-strong), #8b90a0);
+  --mat-sys-outline-variant: light-dark(
+    var(--src-color-border-default),
+    #414754
+  );
+  --mat-sys-neutral10: light-dark(
+    #1a1c1c,
+    #1a1c1c
+  ); /* Variable used for the form field native select option text color */
+
+  /* Error palette variables */
+  --mat-sys-error: light-dark(var(--src-color-bg-critical), #fef3f1);
+  --mat-sys-on-error: light-dark(var(--src-color-text-inverse), #9f200a);
+  --mat-sys-error-container: light-dark(
+    var(--src-color-bg-critical-subdued),
+    #8e1300
+  );
+  --mat-sys-on-error-container: light-dark(
+    var(--src-color-text-critical),
+    #fef3f1
+  );
+
+  /* Neutral variant palette variables */
+  --mat-sys-surface-variant: light-dark(
+    var(--src-color-bg-default-subdued),
+    #414754
+  );
+  --mat-sys-on-surface-variant: light-dark(
+    var(--src-color-text-default),
+    #c1c6d7
+  );
+  --mat-sys-neutral-variant20: light-dark(
+    #2b303d,
+    #2b303d
+  ); /* Variable used for the sidenav scrim (container background shadow when opened) */
+
+  /* TYPOGRAPHY SYSTEM VARIABLES */
+
+  /* Typography variables. Only used in the different typescale system variables. */
+  --mat-sys-brand-font-family: Inter; /* The font-family to use for brand text. */
+  --mat-sys-plain-font-family: Inter; /* The font-family to use for plain text. */
+  --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
+  --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
+  --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
+
+  /* Typescale variables. */
+  /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
+     tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */
+  --mat-sys-body-large: var(--mat-sys-body-large-weight)
+    var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height)
+    var(--mat-sys-body-large-font);
+  --mat-sys-body-large-font: var(--mat-sys-plain-font-family);
+  --mat-sys-body-large-line-height: 1.75;
+  --mat-sys-body-large-size: 16px;
+  --mat-sys-body-large-tracking: 0;
+  --mat-sys-body-large-weight: var(--mat-sys-regular-font-weight);
+
+  /* Body medium typescale */
+  --mat-sys-body-medium: var(--mat-sys-body-medium-weight)
+    var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height)
+    var(--mat-sys-body-medium-font);
+  --mat-sys-body-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-body-medium-line-height: 1.43;
+  --mat-sys-body-medium-size: 14px;
+  --mat-sys-body-medium-tracking: 0;
+  --mat-sys-body-medium-weight: var(--mat-sys-regular-font-weight);
+
+  /* Body small typescale */
+  --mat-sys-body-small: var(--mat-sys-body-small-weight)
+    var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height)
+    var(--mat-sys-body-small-font);
+  --mat-sys-body-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-body-small-line-height: 1.33;
+  --mat-sys-body-small-size: 12px;
+  --mat-sys-body-small-tracking: 0;
+  --mat-sys-body-small-weight: var(--mat-sys-regular-font-weight);
+
+  /* TODO: Where it's used? */
+  /* Display large typescale */
+  --mat-sys-display-large: var(--mat-sys-display-large-weight)
+    var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height)
+    var(--mat-sys-display-large-font);
+  --mat-sys-display-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-large-line-height: 4rem;
+  --mat-sys-display-large-size: 3.562rem;
+  --mat-sys-display-large-tracking: -0.016rem;
+  --mat-sys-display-large-weight: var(--mat-sys-regular-font-weight);
+
+  /* Display medium typescale */
+  --mat-sys-display-medium: var(--mat-sys-display-medium-weight)
+    var(--mat-sys-display-medium-size) /
+    var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);
+  --mat-sys-display-medium-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-medium-line-height: 3.25rem;
+  --mat-sys-display-medium-size: 2.812rem;
+  --mat-sys-display-medium-tracking: 0;
+  --mat-sys-display-medium-weight: var(--mat-sys-regular-font-weight);
+
+  /* Display small typescale */
+  --mat-sys-display-small: var(--mat-sys-display-small-weight)
+    var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height)
+    var(--mat-sys-display-small-font);
+  --mat-sys-display-small-font: var(--mat-sys-brand-font-family);
+  --mat-sys-display-small-line-height: 2.75rem;
+  --mat-sys-display-small-size: 2.25rem;
+  --mat-sys-display-small-tracking: 0;
+  --mat-sys-display-small-weight: var(--mat-sys-regular-font-weight);
+
+  /* Headline large typescale */
+  --mat-sys-headline-large: var(--mat-sys-headline-large-weight)
+    var(--mat-sys-headline-large-size) /
+    var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);
+  --mat-sys-headline-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-headline-large-line-height: 2.5rem;
+  --mat-sys-headline-large-size: 2rem;
+  --mat-sys-headline-large-tracking: 0;
+  --mat-sys-headline-large-weight: var(--mat-sys-regular-font-weight);
+
+  /* Headline medium typescale */
+  --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight)
+    var(--mat-sys-headline-medium-size) /
+    var(--mat-sys-headline-medium-line-height)
+    var(--mat-sys-headline-medium-font);
+  --mat-sys-headline-medium-font: var(--mat-sys-brand-font-family);
+  --mat-sys-headline-medium-line-height: 2.25rem;
+  --mat-sys-headline-medium-size: 1.75rem;
+  --mat-sys-headline-medium-tracking: 0;
+  --mat-sys-headline-medium-weight: var(--mat-sys-regular-font-weight);
+
+  /* Headline small typescale */
+  --mat-sys-headline-small: var(--mat-sys-headline-small-weight)
+    var(--mat-sys-headline-small-size) /
+    var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);
+  --mat-sys-headline-small-font: var(--mat-sys-brand-font-family);
+  --mat-sys-headline-small-line-height: 2rem;
+  --mat-sys-headline-small-size: 1.5rem;
+  --mat-sys-headline-small-tracking: 0;
+  --mat-sys-headline-small-weight: var(--mat-sys-regular-font-weight);
+
+  /* Label large typescale */
+  --mat-sys-label-large: var(--mat-sys-label-large-weight)
+    var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height)
+    var(--mat-sys-label-large-font);
+  --mat-sys-label-large-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-large-line-height: 1.25rem;
+  --mat-sys-label-large-size: 0.875rem;
+  --mat-sys-label-large-tracking: 0.006rem;
+  --mat-sys-label-large-weight: var(--mat-sys-medium-font-weight);
+  --mat-sys-label-large-weight-prominent: var(--mat-sys-bold-font-weight);
+
+  /* Label medium typescale - same as body medium */
+  --mat-sys-label-medium: var(--mat-sys-label-medium-weight)
+    var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height)
+    var(--mat-sys-label-medium-font);
+  --mat-sys-label-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-medium-line-height: var(--mat-sys-body-medium-line-height);
+  --mat-sys-label-medium-size: var(--mat-sys-body-medium-size);
+  --mat-sys-label-medium-tracking: 0;
+  --mat-sys-label-medium-weight: var(--mat-sys-medium-font-weight);
+  --mat-sys-label-medium-weight-prominent: var(--mat-sys-bold-font-weight);
+
+  /* Label small typescale */
+  --mat-sys-label-small: var(--mat-sys-label-small-weight)
+    var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height)
+    var(--mat-sys-label-small-font);
+  --mat-sys-label-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-label-small-line-height: 1rem;
+  --mat-sys-label-small-size: 0.688rem;
+  --mat-sys-label-small-tracking: 0.031rem;
+  --mat-sys-label-small-weight: var(--mat-sys-medium-font-weight);
+
+  /* Title large typescale */
+  --mat-sys-title-large: var(--mat-sys-title-large-weight)
+    var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height)
+    var(--mat-sys-title-large-font);
+  --mat-sys-title-large-font: var(--mat-sys-brand-font-family);
+  --mat-sys-title-large-line-height: 1.75rem;
+  --mat-sys-title-large-size: 1.375rem;
+  --mat-sys-title-large-tracking: 0;
+  --mat-sys-title-large-weight: var(--mat-sys-regular-font-weight);
+
+  /* Title medium typescale */
+  --mat-sys-title-medium: var(--mat-sys-title-medium-weight)
+    var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
+    var(--mat-sys-title-medium-font);
+  --mat-sys-title-medium-font: var(--mat-sys-plain-font-family);
+  --mat-sys-title-medium-line-height: 1.5rem;
+  --mat-sys-title-medium-size: 1rem;
+  --mat-sys-title-medium-tracking: 0.009rem;
+  --mat-sys-title-medium-weight: var(--mat-sys-medium-font-weight);
+
+  /* Title small typescale */
+  --mat-sys-title-small: var(--mat-sys-title-small-weight)
+    var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height)
+    var(--mat-sys-title-small-font);
+  --mat-sys-title-small-font: var(--mat-sys-plain-font-family);
+  --mat-sys-title-small-line-height: var(--lh-small);
+  --mat-sys-title-small-size: var(--fs-small);
+  --mat-sys-title-small-tracking: 0;
+  --mat-sys-title-small-weight: var(--mat-sys-regular-font-weight);
+
+  /* ELEVATION SYSTEM VARIABLES */
+
+  /* Box shadow colors. Only used in the elevation level system variables. */
+  --mat-sys-umbra-color: color-mix(
+    in srgb,
+    var(--mat-sys-shadow),
+    transparent 80%
+  );
+  --mat-sys-penumbra-color: color-mix(
+    in srgb,
+    var(--mat-sys-shadow),
+    transparent 86%
+  );
+  --mat-sys-ambient-color: color-mix(
+    in srgb,
+    var(--mat-sys-shadow),
+    transparent 88%
+  );
+
+  /* Elevation level system variables. These are used as the value for box-shadow CSS property. */
+  --mat-sys-level0:
+    0px 0px 0px 0px var(--mat-sys-umbra-color),
+    0px 0px 0px 0px var(--mat-sys-penumbra-color),
+    0px 0px 0px 0px var(--mat-sys-ambient-color);
+  --mat-sys-level1:
+    0px 2px 1px -1px var(--mat-sys-umbra-color),
+    0px 1px 1px 0px var(--mat-sys-penumbra-color),
+    0px 1px 3px 0px var(--mat-sys-ambient-color);
+  --mat-sys-level2:
+    0px 3px 3px -2px var(--mat-sys-umbra-color),
+    0px 3px 4px 0px var(--mat-sys-penumbra-color),
+    0px 1px 8px 0px var(--mat-sys-ambient-color);
+  --mat-sys-level3:
+    0px 3px 5px -1px var(--mat-sys-umbra-color),
+    0px 6px 10px 0px var(--mat-sys-penumbra-color),
+    0px 1px 18px 0px var(--mat-sys-ambient-color);
+  --mat-sys-level4:
+    0px 5px 5px -3px var(--mat-sys-umbra-color),
+    0px 8px 10px 1px var(--mat-sys-penumbra-color),
+    0px 3px 14px 2px var(--mat-sys-ambient-color);
+  --mat-sys-level5:
+    0px 7px 8px -4px var(--mat-sys-umbra-color),
+    0px 12px 17px 2px var(--mat-sys-penumbra-color),
+    0px 5px 22px 4px var(--mat-sys-ambient-color);
+
+  /* SHAPE SYSTEM VARIABLES */
+  --mat-sys-corner-extra-large: 24px;
+  --mat-sys-corner-extra-large-top: 24px 24px 0 0;
+  --mat-sys-corner-extra-small: 2px;
+  --mat-sys-corner-extra-small-top: 2px 2px 0 0;
+  --mat-sys-corner-full: 9999px;
+  --mat-sys-corner-large: 16px;
+  --mat-sys-corner-large-end: 0 16px 16px 0;
+  --mat-sys-corner-large-start: 16px 0 0 16px;
+  --mat-sys-corner-large-top: 16px 16px 0 0;
+  --mat-sys-corner-medium: 8px;
+  --mat-sys-corner-none: 0;
+  --mat-sys-corner-small: 4px;
+
+  /* STATE SYSTEM VARIABLES */
+  --mat-sys-dragged-state-layer-opacity: 0.16;
+  --mat-sys-focus-state-layer-opacity: 0.12;
+  --mat-sys-hover-state-layer-opacity: 0.08;
+  --mat-sys-pressed-state-layer-opacity: 0.12;
+}

package/styles/material/toggle.scss

@@ -0,0 +1,47 @@
+@use '@angular/material' as mat;
+:root {
+  --matToggleShadow:
+    0px 8px 20px 0px rgba(23, 24, 24, 0.12),
+    0px 3px 6px 0px rgba(23, 24, 24, 0.08);
+  @include mat.slide-toggle-overrides(
+    (
+      track-height: 24px,
+      track-width: 44px,
+      unselected-icon-size: 0,
+      selected-icon-size: 0,
+      track-outline-width: 0,
+
+      unselected-handle-color: var(--src-color-bg-default),
+      unselected-focus-handle-color: var(--src-color-bg-default),
+      unselected-hover-handle-color: var(--src-color-bg-default),
+      unselected-pressed-handle-color: var(--src-color-bg-default),
+      unselected-track-color: var(--src-color-bg-strong),
+      unselected-hover-track-color: var(--src-color-bg-strong),
+      unselected-focus-track-color: var(--src-color-bg-strong),
+      unselected-pressed-track-color: var(--src-color-bg-strong),
+      with-icon-handle-size: 20px,
+      pressed-handle-size: 20px,
+      selected-handle-size: 20px,
+
+      selected-handle-color: var(--src-color-bg-default),
+      selected-focus-handle-color: var(--src-color-bg-default),
+      selected-hover-handle-color: var(--src-color-bg-default),
+      selected-pressed-handle-color: var(--src-color-bg-default),
+      selected-track-color: var(--src-color-bg-primary),
+      unselected-with-icon-handle-horizontal-margin: 0 2px,
+      selected-with-icon-handle-horizontal-margin: 0 22px,
+      handle-elevation-shadow: var(--matToggleShadow),
+      label-text-color: var(--src-color-text-default),
+      label-text-line-height: var(--src-lh-base),
+      label-text-size: var(--src-fs-base),
+      label-text-tracking: 0.005em,
+    )
+  );
+}
+mat-slide-toggle .mdc-switch {
+  overflow: hidden;
+  border-radius: var(--mat-sys-corner-full, 9999px);
+}
+.mdc-switch__ripple::after {
+  display: none !important;
+}

package/styles/source.ui.scss

@@ -0,0 +1,11 @@
+// Material variables
+@use 'material/theme';
+// Overrides for material components
+@use 'material/form-field';
+@use 'material/checkbox';
+@use 'material/radio';
+@use 'material/select';
+@use 'material/toggle';
+
+// Toastr
+@use 'toastr/toastr';

package/styles/toastr/toastr.scss

@@ -0,0 +1,79 @@
+@use 'ngx-toastr/toastr';
+
+.toast-container {
+  font-family: var(--src-font-family-sans);
+
+  &.inline {
+    position: absolute;
+    bottom: 12px;
+    left: 12px;
+  }
+}
+
+.toast-container .ngx-toastr {
+  --srcToastrBg: #1f2937;
+  --srcToastrIconColor: #fff;
+  --srcToastrMaxWidth: 400px;
+  --srcToastrMinWidth: 120px;
+  --srcToastrMessageFontSize: 16px;
+  --srcToastrTitleFontSize: 18px;
+  --srcToastrActionFontSize: 14px;
+  --srcToastrBorderRadius: 8px;
+  --srcToastrContentMaxWidth: 100%;
+  --srcToastrShadow:
+    0px 3px 6px 0px rgba(23, 24, 24, 0.08),
+    0px 8px 20px 0px rgba(23, 24, 24, 0.12);
+
+  width: auto;
+  max-width: var(--srcToastrMaxWidth);
+  min-width: var(--srcToastrMinWidth);
+  padding: 12px 16px;
+  background: var(--srcToastrBg);
+  border-radius: var(--srcToastrBorderRadius);
+  box-shadow: var(--srcToastrShadow);
+
+  &.toast-error {
+    --srcToastrBg: var(--src-color-bg-critical, #c5280c);
+  }
+  &.toast-info {
+    --srcToastrBg: var(--src-color-blue-600);
+  }
+  &.toast-warning {
+    --srcToastrBg: var(--src-color-yellow-800);
+  }
+  &.toast-success {
+    --srcToastrBg: var(--src-color-green-700);
+  }
+
+  &:hover {
+    box-shadow: var(--srcToastrShadow);
+  }
+
+  .toast-message {
+    font-size: var(--srcToastrMessageFontSize);
+    line-height: 1.3;
+    padding-right: 40px;
+  }
+
+  .toast-close-button {
+    top: 0;
+    right: 0;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    border: none;
+    background-color: transparent;
+
+    > span {
+      display: none;
+    }
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='m7 8.4-4.9 4.9a.95.95 0 0 1-.7.27.95.95 0 0 1-.7-.27.95.95 0 0 1-.27-.7c0-.28.09-.52.27-.7L5.6 7 .7 2.1a.95.95 0 0 1-.27-.7c0-.28.09-.52.27-.7a.95.95 0 0 1 .7-.27c.28 0 .52.09.7.27L7 5.6 11.9.7a.95.95 0 0 1 .7-.27c.28 0 .52.09.7.27.18.18.27.42.27.7 0 .28-.09.52-.27.7L8.4 7l4.9 4.9c.18.18.27.42.27.7 0 .28-.09.52-.27.7a.95.95 0 0 1-.7.27.95.95 0 0 1-.7-.27L7 8.4Z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+    }
+  }
+}