@elementar-rt/components 0.6.55

package/styles/_common.scss

@@ -0,0 +1,776 @@
+@use "@angular/cdk/overlay-prebuilt";
+@use '@angular/material' as mat;
+
+$m3-light-theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: mat.$azure-palette,
+    tertiary: mat.$blue-palette,
+    use-system-variables: true,
+    system-variables-prefix: sys,
+  ),
+  typography: (
+    brand-family: 'var(--font-sans)',
+    plain-family: 'var(--font-sans)',
+    use-system-variables: true,
+    system-variables-prefix: sys,
+  ),
+  density: (
+    scale: 0,
+  ),
+)) !default;
+
+$m3-dark-theme: mat.define-theme((
+  color: (
+    theme-type: dark,
+    primary: mat.$azure-palette,
+    tertiary: mat.$blue-palette,
+    use-system-variables: true,
+    system-variables-prefix: sys,
+  ),
+  typography: (
+    brand-family: 'var(--font-sans)',
+    plain-family: 'var(--font-sans)',
+    use-system-variables: true,
+    system-variables-prefix: sys,
+  ),
+  density: (
+    scale: 0,
+  ),
+)) !default;
+
+@use 'tailwindcss';
+@source '../';
+@source not '../styles';
+@plugin '@tailwindcss/typography';
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --color-neutral: #{mat.get-theme-color($m3-light-theme, neutral, 60)};
+  --color-neutral-0: #{mat.get-theme-color($m3-light-theme, neutral, 100)};
+  --color-neutral-50: #{mat.get-theme-color($m3-light-theme, neutral, 99)};
+  --color-neutral-100: #{mat.get-theme-color($m3-light-theme, neutral, 98)};
+  --color-neutral-200: #{mat.get-theme-color($m3-light-theme, neutral, 95)};
+  --color-neutral-300: #{mat.get-theme-color($m3-light-theme, neutral, 90)};
+  --color-neutral-400: #{mat.get-theme-color($m3-light-theme, neutral, 80)};
+  --color-neutral-450: #{mat.get-theme-color($m3-light-theme, neutral, 70)};
+  --color-neutral-500: #{mat.get-theme-color($m3-light-theme, neutral, 60)};
+  --color-neutral-600: #{mat.get-theme-color($m3-light-theme, neutral, 50)};
+  --color-neutral-650: #{mat.get-theme-color($m3-light-theme, neutral, 40)};
+  --color-neutral-700: #{mat.get-theme-color($m3-light-theme, neutral, 35)};
+  --color-neutral-800: #{mat.get-theme-color($m3-light-theme, neutral, 30)};
+  --color-neutral-900: #{mat.get-theme-color($m3-light-theme, neutral, 25)};
+  --color-neutral-950: #{mat.get-theme-color($m3-light-theme, neutral, 20)};
+  --color-neutral-1000: #{mat.get-theme-color($m3-light-theme, neutral, 10)};
+
+  --color-neutral-variant: #{mat.get-theme-color($m3-light-theme, neutral-variant, 60)};
+  --color-neutral-variant-0: #{mat.get-theme-color($m3-light-theme, neutral-variant, 100)};
+  --color-neutral-variant-50: #{mat.get-theme-color($m3-light-theme, neutral-variant, 99)};
+  --color-neutral-variant-100: #{mat.get-theme-color($m3-light-theme, neutral-variant, 98)};
+  --color-neutral-variant-200: #{mat.get-theme-color($m3-light-theme, neutral-variant, 95)};
+  --color-neutral-variant-300: #{mat.get-theme-color($m3-light-theme, neutral-variant, 90)};
+  --color-neutral-variant-400: #{mat.get-theme-color($m3-light-theme, neutral-variant, 80)};
+  --color-neutral-variant-450: #{mat.get-theme-color($m3-light-theme, neutral-variant, 70)};
+  --color-neutral-variant-500: #{mat.get-theme-color($m3-light-theme, neutral-variant, 60)};
+  --color-neutral-variant-600: #{mat.get-theme-color($m3-light-theme, neutral-variant, 50)};
+  --color-neutral-variant-650: #{mat.get-theme-color($m3-light-theme, neutral-variant, 40)};
+  --color-neutral-variant-700: #{mat.get-theme-color($m3-light-theme, neutral-variant, 35)};
+  --color-neutral-variant-800: #{mat.get-theme-color($m3-light-theme, neutral-variant, 30)};
+  --color-neutral-variant-900: #{mat.get-theme-color($m3-light-theme, neutral-variant, 25)};
+  --color-neutral-variant-950: #{mat.get-theme-color($m3-light-theme, neutral-variant, 20)};
+  --color-neutral-variant-1000: #{mat.get-theme-color($m3-light-theme, neutral-variant, 10)};
+
+  // primary color
+  --color-primary-0: #{mat.get-theme-color($m3-light-theme, primary, 100)};
+  --color-primary-50: #{mat.get-theme-color($m3-light-theme, primary, 99)};
+  --color-primary-100: #{mat.get-theme-color($m3-light-theme, primary, 98)};
+  --color-primary-200: #{mat.get-theme-color($m3-light-theme, primary, 95)};
+  --color-primary-300: #{mat.get-theme-color($m3-light-theme, primary, 90)};
+  --color-primary-400: #{mat.get-theme-color($m3-light-theme, primary, 80)};
+  --color-primary-450: #{mat.get-theme-color($m3-light-theme, primary, 70)};
+  --color-primary-500: #{mat.get-theme-color($m3-light-theme, primary, 60)};
+  --color-primary-600: #{mat.get-theme-color($m3-light-theme, primary, 50)};
+  --color-primary-650: #{mat.get-theme-color($m3-light-theme, primary, 40)};
+  --color-primary-700: #{mat.get-theme-color($m3-light-theme, primary, 35)};
+  --color-primary-800: #{mat.get-theme-color($m3-light-theme, primary, 30)};
+  --color-primary-900: #{mat.get-theme-color($m3-light-theme, primary, 25)};
+  --color-primary-950: #{mat.get-theme-color($m3-light-theme, primary, 20)};
+  --color-primary-1000: #{mat.get-theme-color($m3-light-theme, primary, 10)};
+
+  --color-secondary-0: #{mat.get-theme-color($m3-light-theme, secondary, 100)};
+  --color-secondary-50: #{mat.get-theme-color($m3-light-theme, secondary, 99)};
+  --color-secondary-100: #{mat.get-theme-color($m3-light-theme, secondary, 98)};
+  --color-secondary-200: #{mat.get-theme-color($m3-light-theme, secondary, 95)};
+  --color-secondary-300: #{mat.get-theme-color($m3-light-theme, secondary, 90)};
+  --color-secondary-400: #{mat.get-theme-color($m3-light-theme, secondary, 80)};
+  --color-secondary-450: #{mat.get-theme-color($m3-light-theme, secondary, 70)};
+  --color-secondary-500: #{mat.get-theme-color($m3-light-theme, secondary, 60)};
+  --color-secondary-600: #{mat.get-theme-color($m3-light-theme, secondary, 50)};
+  --color-secondary-650: #{mat.get-theme-color($m3-light-theme, secondary, 40)};
+  --color-secondary-700: #{mat.get-theme-color($m3-light-theme, secondary, 35)};
+  --color-secondary-800: #{mat.get-theme-color($m3-light-theme, secondary, 30)};
+  --color-secondary-900: #{mat.get-theme-color($m3-light-theme, secondary, 25)};
+  --color-secondary-950: #{mat.get-theme-color($m3-light-theme, secondary, 20)};
+  --color-secondary-1000: #{mat.get-theme-color($m3-light-theme, secondary, 10)};
+
+  // tertiary color
+  --color-tertiary-0: #{mat.get-theme-color($m3-light-theme, tertiary, 100)};
+  --color-tertiary-50: #{mat.get-theme-color($m3-light-theme, tertiary, 99)};
+  --color-tertiary-100: #{mat.get-theme-color($m3-light-theme, tertiary, 98)};
+  --color-tertiary-200: #{mat.get-theme-color($m3-light-theme, tertiary, 95)};
+  --color-tertiary-300: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
+  --color-tertiary-400: #{mat.get-theme-color($m3-light-theme, tertiary, 80)};
+  --color-tertiary-450: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
+  --color-tertiary-500: #{mat.get-theme-color($m3-light-theme, tertiary, 60)};
+  --color-tertiary-600: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+  --color-tertiary-650: #{mat.get-theme-color($m3-light-theme, tertiary, 40)};
+  --color-tertiary-700: #{mat.get-theme-color($m3-light-theme, tertiary, 35)};
+  --color-tertiary-800: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+  --color-tertiary-900: #{mat.get-theme-color($m3-light-theme, tertiary, 25)};
+  --color-tertiary-950: #{mat.get-theme-color($m3-light-theme, tertiary, 20)};
+  --color-tertiary-1000: #{mat.get-theme-color($m3-light-theme, tertiary, 10)};
+
+  --color-error-0: #{mat.get-theme-color($m3-light-theme, error, 100)};
+  --color-error-50: #{mat.get-theme-color($m3-light-theme, error, 99)};
+  --color-error-100: #{mat.get-theme-color($m3-light-theme, error, 98)};
+  --color-error-200: #{mat.get-theme-color($m3-light-theme, error, 95)};
+  --color-error-300: #{mat.get-theme-color($m3-light-theme, error, 90)};
+  --color-error-400: #{mat.get-theme-color($m3-light-theme, error, 80)};
+  --color-error-450: #{mat.get-theme-color($m3-light-theme, error, 70)};
+  --color-error-500: #{mat.get-theme-color($m3-light-theme, error, 60)};
+  --color-error-600: #{mat.get-theme-color($m3-light-theme, error, 50)};
+  --color-error-650: #{mat.get-theme-color($m3-light-theme, error, 40)};
+  --color-error-700: #{mat.get-theme-color($m3-light-theme, error, 35)};
+  --color-error-800: #{mat.get-theme-color($m3-light-theme, error, 30)};
+  --color-error-900: #{mat.get-theme-color($m3-light-theme, error, 25)};
+  --color-error-950: #{mat.get-theme-color($m3-light-theme, error, 20)};
+  --color-error-1000: #{mat.get-theme-color($m3-light-theme, error, 10)};
+
+  --color-inverse: #{mat.get-theme-color($m3-light-theme, neutral, 50)};
+  --color-default-low: #{mat.get-theme-color($m3-light-theme, neutral, 90)};
+  --color-default-high: #{mat.get-theme-color($m3-light-theme, neutral, 70)};
+
+  --emr-transition-transform: transform .15s linear;
+  --mat-button-protected-container-height: 2.375rem;
+  --mat-menu-item-label-text-size: var(--text-tiny);
+  --mat-option-label-text-size: var(--text-tiny);
+  --mat-table-row-item-outline-color: var(--color-default);
+
+  @include mat.all-component-themes($m3-light-theme);
+  @include mat.typography-hierarchy($m3-light-theme);
+  @include mat.system-level-colors($m3-light-theme);
+  @include mat.system-level-typography($m3-light-theme);
+}
+
+.link {
+  color: var(--sys-primary);
+
+  &:hover {
+    color: var(--sys-tertiary);
+  }
+}
+
+.mat-icon {
+  font-family: 'Material Symbols Outlined', serif;
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+
+  &.filled {
+    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
+  }
+}
+
+// internal angular material icon font
+.material-icons {
+  word-wrap: normal;
+  font-family: 'Material Symbols Outlined', serif;
+  font-size: 24px;
+  line-height: 1;
+}
+
+body {
+  display: block;
+  min-height: 100vh;
+  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: var(--text-md);
+  line-height: var(--leading-normal);
+  background: var(--color-background);
+  color: var(--color-on-background);
+
+  *:not(.emr-native-scroll) {
+    &::-webkit-scrollbar {
+      background: none;
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      // background-color: var(--color-neutral-200);
+      border-radius: theme(--radius-sm);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: theme(--radius-sm);
+      background-color: var(--color-neutral-300);
+
+      &:hover {
+        background-color: var(--color-neutral-400);
+      }
+    }
+  }
+
+  .emr-scroll-lg {
+    &::-webkit-scrollbar {
+      width: 11px;
+      height: 11px;
+    }
+  }
+}
+
+app-root {
+  display: contents;
+}
+
+.mdc-icon-button {
+  line-height: 0;
+}
+
+.mat-mdc-menu-panel {
+  max-width: none !important;
+}
+
+.emr-button-loading {
+  .mat-button-wrapper {
+    visibility: hidden;
+  }
+
+  .mat-mdc-progress-spinner {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: calc(50% - 10px);
+  }
+}
+
+.mdc-notched-outline__notch {
+  border-right: none;
+}
+
+input.emr-number-input-no-spinners::-webkit-outer-spin-button,
+input.emr-number-input-no-spinners::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number].emr-number-input-no-spinners {
+  -moz-appearance: textfield;
+}
+
+/* Animate items as they're being sorted. */
+.cdk-drop-list-dragging .cdk-drag {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Animate an item that has been dropped. */
+.cdk-drag-animating {
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.emr-table {
+  font-size: theme(--text-sm);
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  th,
+  td {
+    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+    vertical-align: middle;
+    text-align: left;
+  }
+
+  th {
+    font-weight: 600;
+    height: var(--mat-table-row-item-container-height);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  td {
+    height: var(--mat-table-row-item-container-height);
+  }
+
+  tr {
+    color: var(--mat-table-row-item-label-text-color);
+
+    &:not(:first-child) {
+      td {
+        border-top: 1px solid var(--color-border);
+      }
+    }
+  }
+}
+
+.mat-mdc-table {
+  --mat-table-row-item-outline-color: var(--color-neutral-300);
+}
+
+.mat-mdc-row {
+  &.cdk-drag-preview {
+    background-color: var(--color-primary-50);
+    border-bottom-color: transparent;
+    width: 100%;
+
+    td {
+      vertical-align: middle;
+      height: inherit;
+      border-bottom-color: transparent;
+    }
+  }
+}
+
+.table-row-drag-placeholder {
+  background-color: var(--color-primary-200);
+  height: var(--mat-table-row-item-container-height);
+}
+
+.code {
+  font-size: var(--text-xs);
+  display: inline-block;
+  padding: --spacing(1.3) --spacing(1.75);
+  border-radius: theme(--radius-lg);
+  color: var(--color-on-secondary-fixed);
+  border-color: var(--color-tertiary-400);
+  margin-left: --spacing(0.5);
+  margin-right: --spacing(0.5);
+  background: var(--color-secondary-fixed);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+html {
+  min-height: 100vh;
+
+  &:has(emr-layout[windowmode]) {
+    overflow: hidden;
+  }
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &.dark {
+    --color-neutral-0: #{mat.get-theme-color($m3-dark-theme, neutral, 100)};
+    --color-neutral-50: #{mat.get-theme-color($m3-dark-theme, neutral, 99)};
+    --color-neutral-100: #{mat.get-theme-color($m3-dark-theme, neutral, 98)};
+    --color-neutral-200: #{mat.get-theme-color($m3-dark-theme, neutral, 95)};
+    --color-neutral-300: #{mat.get-theme-color($m3-dark-theme, neutral, 90)};
+    --color-neutral-400: #{mat.get-theme-color($m3-dark-theme, neutral, 80)};
+    --color-neutral-450: #{mat.get-theme-color($m3-dark-theme, neutral, 70)};
+    --color-neutral-500: #{mat.get-theme-color($m3-dark-theme, neutral, 60)};
+    --color-neutral-600: #{mat.get-theme-color($m3-dark-theme, neutral, 50)};
+    --color-neutral-650: #{mat.get-theme-color($m3-dark-theme, neutral, 40)};
+    --color-neutral-700: #{mat.get-theme-color($m3-dark-theme, neutral, 35)};
+    --color-neutral-800: #{mat.get-theme-color($m3-dark-theme, neutral, 30)};
+    --color-neutral-900: #{mat.get-theme-color($m3-dark-theme, neutral, 25)};
+    --color-neutral-950: #{mat.get-theme-color($m3-dark-theme, neutral, 20)};
+    --color-neutral-1000: #{mat.get-theme-color($m3-dark-theme, neutral, 10)};
+
+    --color-neutral-variant-0: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 100)};
+    --color-neutral-variant-50: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 99)};
+    --color-neutral-variant-100: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 98)};
+    --color-neutral-variant-200: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 95)};
+    --color-neutral-variant-300: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 90)};
+    --color-neutral-variant-400: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 80)};
+    --color-neutral-variant-450: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 70)};
+    --color-neutral-variant-500: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 60)};
+    --color-neutral-variant-600: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 50)};
+    --color-neutral-variant-650: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 40)};
+    --color-neutral-variant-700: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 35)};
+    --color-neutral-variant-800: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 30)};
+    --color-neutral-variant-900: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 25)};
+    --color-neutral-variant-950: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 20)};
+    --color-neutral-variant-1000: #{mat.get-theme-color($m3-dark-theme, neutral-variant, 10)};
+
+    // primary color
+    --color-primary-0: #{mat.get-theme-color($m3-dark-theme, primary, 100)};
+    --color-primary-50: #{mat.get-theme-color($m3-dark-theme, primary, 99)};
+    --color-primary-100: #{mat.get-theme-color($m3-dark-theme, primary, 98)};
+    --color-primary-200: #{mat.get-theme-color($m3-dark-theme, primary, 95)};
+    --color-primary-300: #{mat.get-theme-color($m3-dark-theme, primary, 90)};
+    --color-primary-400: #{mat.get-theme-color($m3-dark-theme, primary, 80)};
+    --color-primary-450: #{mat.get-theme-color($m3-dark-theme, primary, 70)};
+    --color-primary-500: #{mat.get-theme-color($m3-dark-theme, primary, 60)};
+    --color-primary-600: #{mat.get-theme-color($m3-dark-theme, primary, 50)};
+    --color-primary-650: #{mat.get-theme-color($m3-dark-theme, primary, 40)};
+    --color-primary-700: #{mat.get-theme-color($m3-dark-theme, primary, 35)};
+    --color-primary-800: #{mat.get-theme-color($m3-dark-theme, primary, 30)};
+    --color-primary-900: #{mat.get-theme-color($m3-dark-theme, primary, 25)};
+    --color-primary-950: #{mat.get-theme-color($m3-dark-theme, primary, 20)};
+    --color-primary-1000: #{mat.get-theme-color($m3-dark-theme, primary, 10)};
+
+    --color-secondary-0: #{mat.get-theme-color($m3-dark-theme, secondary, 100)};
+    --color-secondary-50: #{mat.get-theme-color($m3-dark-theme, secondary, 99)};
+    --color-secondary-100: #{mat.get-theme-color($m3-dark-theme, secondary, 98)};
+    --color-secondary-200: #{mat.get-theme-color($m3-dark-theme, secondary, 95)};
+    --color-secondary-300: #{mat.get-theme-color($m3-dark-theme, secondary, 90)};
+    --color-secondary-400: #{mat.get-theme-color($m3-dark-theme, secondary, 80)};
+    --color-secondary-450: #{mat.get-theme-color($m3-dark-theme, secondary, 70)};
+    --color-secondary-500: #{mat.get-theme-color($m3-dark-theme, secondary, 60)};
+    --color-secondary-600: #{mat.get-theme-color($m3-dark-theme, secondary, 50)};
+    --color-secondary-650: #{mat.get-theme-color($m3-dark-theme, secondary, 40)};
+    --color-secondary-700: #{mat.get-theme-color($m3-dark-theme, secondary, 35)};
+    --color-secondary-800: #{mat.get-theme-color($m3-dark-theme, secondary, 30)};
+    --color-secondary-900: #{mat.get-theme-color($m3-dark-theme, secondary, 25)};
+    --color-secondary-950: #{mat.get-theme-color($m3-dark-theme, secondary, 20)};
+    --color-secondary-1000: #{mat.get-theme-color($m3-dark-theme, secondary, 10)};
+
+    // tertiary color
+    --color-tertiary-0: #{mat.get-theme-color($m3-dark-theme, tertiary, 100)};
+    --color-tertiary-50: #{mat.get-theme-color($m3-dark-theme, tertiary, 99)};
+    --color-tertiary-100: #{mat.get-theme-color($m3-dark-theme, tertiary, 98)};
+    --color-tertiary-200: #{mat.get-theme-color($m3-dark-theme, tertiary, 95)};
+    --color-tertiary-300: #{mat.get-theme-color($m3-dark-theme, tertiary, 90)};
+    --color-tertiary-400: #{mat.get-theme-color($m3-dark-theme, tertiary, 80)};
+    --color-tertiary-450: #{mat.get-theme-color($m3-dark-theme, tertiary, 70)};
+    --color-tertiary-500: #{mat.get-theme-color($m3-dark-theme, tertiary, 60)};
+    --color-tertiary-600: #{mat.get-theme-color($m3-dark-theme, tertiary, 50)};
+    --color-tertiary-650: #{mat.get-theme-color($m3-dark-theme, tertiary, 40)};
+    --color-tertiary-700: #{mat.get-theme-color($m3-dark-theme, tertiary, 35)};
+    --color-tertiary-800: #{mat.get-theme-color($m3-dark-theme, tertiary, 30)};
+    --color-tertiary-900: #{mat.get-theme-color($m3-dark-theme, tertiary, 25)};
+    --color-tertiary-950: #{mat.get-theme-color($m3-dark-theme, tertiary, 20)};
+    --color-tertiary-1000: #{mat.get-theme-color($m3-dark-theme, tertiary, 10)};
+
+    --color-error-0: #{mat.get-theme-color($m3-dark-theme, error, 100)};
+    --color-error-50: #{mat.get-theme-color($m3-dark-theme, error, 99)};
+    --color-error-100: #{mat.get-theme-color($m3-dark-theme, error, 98)};
+    --color-error-200: #{mat.get-theme-color($m3-dark-theme, error, 95)};
+    --color-error-300: #{mat.get-theme-color($m3-dark-theme, error, 90)};
+    --color-error-400: #{mat.get-theme-color($m3-dark-theme, error, 80)};
+    --color-error-450: #{mat.get-theme-color($m3-dark-theme, error, 70)};
+    --color-error-500: #{mat.get-theme-color($m3-dark-theme, error, 60)};
+    --color-error-600: #{mat.get-theme-color($m3-dark-theme, error, 50)};
+    --color-error-650: #{mat.get-theme-color($m3-dark-theme, error, 40)};
+    --color-error-700: #{mat.get-theme-color($m3-dark-theme, error, 35)};
+    --color-error-800: #{mat.get-theme-color($m3-dark-theme, error, 30)};
+    --color-error-900: #{mat.get-theme-color($m3-dark-theme, error, 25)};
+    --color-error-950: #{mat.get-theme-color($m3-dark-theme, error, 20)};
+    --color-error-1000: #{mat.get-theme-color($m3-dark-theme, error, 10)};
+
+    --mat-table-row-item-outline-color: var(--color-neutral-300);
+    --color-warn: theme(--color-red-500);
+
+    // custom green color for dark scheme
+    --color-green: #b8cbbc;
+    --color-on-green: #243429;
+    --color-green-container: #3a4b3f;
+    --color-on-green-container: #d4e7d7;
+    --color-green-container-high: #45564a;
+    --color-green-container-highest: #516356;
+
+    // custom blue color for dark scheme
+    --color-blue: #b9c8da;
+    --color-on-blue: #243240;
+    --color-blue-container: #3a4857;
+    --color-on-blue-container: #d5e4f7;
+    --color-blue-container-high: #465463;
+    --color-blue-container-highest: #52606f;
+
+    // custom red color for dark scheme
+    --color-red: #f4b7b7;
+    --color-on-red: #4c2526;
+    --color-red-container: #663b3c;
+    --color-on-red-container: #ffdad9;
+    --color-red-container-high: #734647;
+    --color-red-container-highest: #815252;
+
+    // custom orange color for dark scheme
+    --color-orange: #f7b994;
+    --color-on-orange: #4c270c;
+    --color-orange-container: #673c20;
+    --color-on-orange-container: #ffdbc8;
+    --color-orange-container-high: #74482a;
+    --color-orange-container-highest: #825335;
+
+
+    @include mat.all-component-colors($m3-dark-theme);
+    @include mat.system-level-colors($m3-dark-theme);
+    @include mat.system-level-typography($m3-dark-theme);
+
+    .emr-table {
+      td {
+        height: var(--mat-table-row-item-container-height);
+      }
+    }
+
+    .mat-mdc-table {
+      --mat-table-row-item-outline-color: var(--color-neutral-600);
+    }
+
+    .mat-mdc-row {
+      &.cdk-drag-preview {
+        background-color: var(--color-neutral-700);
+      }
+    }
+
+    .table-row-drag-placeholder {
+      background-color: var(--color-neutral-600);
+    }
+
+    body {
+      *:not(.emr-native-scroll) {
+        &::-webkit-scrollbar-track {
+          // background-color: var(--color-neutral-700);
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--color-neutral-700);
+          border-radius: theme(--radius-sm);
+
+          &:hover {
+            background-color: var(--color-neutral-600);
+          }
+        }
+      }
+    }
+  }
+}
+
+:root {
+  --sys-body-large: 400 var(--text-md) / var(--leading-loose) var(--font-sans);
+}
+
+html.dark {
+  --sys-body-large: 400 var(--text-md) / var(--leading-loose) var(--font-sans);
+
+  .code {
+    background: var(--color-secondary-container);
+    color: var(--color-on-secondary-container);
+  }
+}
+
+.emr-country-select-panel,
+.emr-timezone-select-panel {
+  padding-top: 0 !important;
+}
+
+@theme static {
+  --font-sans: "Open Sans";
+
+  // primary
+  --color-on-primary: var(--sys-on-primary);
+  --color-primary-container: var(--sys-primary-container);
+  --color-on-primary-container: var(--sys-on-primary-container);
+  --color-primary-fixed: var(--sys-primary-fixed);
+  --color-primary-fixed-dim: var(--sys-primary-fixed-dim);
+  --color-on-primary-fixed: var(--sys-on-primary-fixed);
+  --color-on-primary-fixed-variant: var(--sys-on-primary-fixed-variant);
+
+    // secondary
+  --color-on-secondary: var(--sys-on-secondary);
+  --color-secondary-container: var(--sys-secondary-container);
+  --color-on-secondary-container: var(--sys-on-secondary-container);
+  --color-secondary-fixed: var(--sys-secondary-fixed);
+  --color-secondary-fixed-dim: var(--sys-secondary-fixed-dim);
+  --color-on-secondary-fixed: var(--sys-on-secondary-fixed);
+  --color-on-secondary-fixed-variant: var(--sys-on-secondary-fixed-variant);
+
+    // tertiary
+  --color-on-tertiary: var(--sys-on-tertiary);
+  --color-tertiary-container: var(--sys-tertiary-container);
+  --color-on-tertiary-container: var(--sys-on-tertiary-container);
+  --color-tertiary-fixed: var(--sys-tertiary-fixed);
+  --color-tertiary-fixed-dim: var(--sys-tertiary-fixed-dim);
+  --color-on-tertiary-fixed: var(--sys-on-tertiary-fixed);
+  --color-on-tertiary-fixed-variant: var(--sys-on-tertiary-fixed-variant);
+
+  --color-on-error: var(--sys-on-error);
+  --color-error-container: var(--sys-error-container);
+  --color-on-error-container: var(--sys-on-error-container);
+
+  --color-surface: var(--sys-surface);
+  --color-surface-dim: var(--sys-surface-dim);
+  --color-surface-tint: var(--sys-surface-tint);
+  --color-surface-variant: var(--sys-surface-variant);
+  --color-surface-bright: var(--sys-surface-bright);
+  --color-surface-container-lowest: var(--sys-surface-container-lowest);
+  --color-surface-container-low: var(--sys-surface-container-low);
+  --color-surface-container: var(--sys-surface-container);
+  --color-surface-container-high: var(--sys-surface-container-high);
+  --color-surface-container-highest: var(--sys-surface-container-highest);
+  --color-on-surface: var(--sys-on-surface);
+  --color-on-surface-variant: var(--sys-on-surface-variant);
+
+  --color-outline: var(--sys-outline);
+  --color-outline-variant: var(--sys-outline-variant);
+
+  --color-inverse-surface: var(--sys-inverse-surface);
+  --color-inverse-on-surface: var(--sys-inverse-on-surface);
+  --color-inverse-primary: var(--sys-inverse-primary);
+
+  --color-scrim: var(--sys-scrim);
+  --color-shadow: var(--sys-shadow);
+
+  --color-warn: var(--color-warn);
+  --color-dark: #303030;
+
+  --color-white: #fff;
+  --color-black: #000;
+
+  // custom green color
+  --color-green: #92a697;
+  --color-on-green: #fff;
+  --color-green-container: #d9eee0;
+  --color-on-green-container: #2f3f34;
+  --color-green-container-high: #cdded0;
+  --color-green-container-highest: #aebfb2;
+
+  // custom blue color
+  --color-blue: #aebfd2;
+  --color-on-blue: #fcfcff;
+  --color-blue-container: #deeaf8;
+  --color-on-blue-container: #23313f;
+  --color-blue-container-high: #cbd9ec;
+  --color-blue-container-highest: #aebfd2;
+
+  // custom red color
+  --color-red: #e8b0b0;
+  --color-on-red: #fffbff;
+  --color-red-container: #ffe3e2;
+  --color-on-red-container: #663b3c;
+  --color-red-container-high: #ffd0cf;
+  --color-red-container-highest: #e8b0b0;
+
+  // custom orange color
+  --color-orange: #efb189;
+  --color-on-orange: #fffbff;
+  --color-orange-container: #ffe4da;
+  --color-on-orange-container: #593116;
+  --color-orange-container-high: #fbc9b1;
+  --color-orange-container-highest: #cf956f;
+
+  --color-default: var(--sys-outline-variant);
+  --color-low: var(--sys-surface-variant);
+  --color-border: var(--sys-outline-variant);
+  --border: 1px;
+
+  --text-5xs: 8px;
+  --text-4xs: 9px;
+  --text-3xs: 10px;
+  --text-2xs: 11px;
+  --text-tiny: 13px;
+  --text-md: 15px;
+
+  --color-background: var(--mat-app-background-color);
+  --color-on-background: var(--mat-app-text-color);
+
+  --color-neutral: var(--color-neutral);
+  --color-neutral-0: var(--color-neutral-0);
+  --color-neutral-50: var(--color-neutral-50);
+  --color-neutral-100: var(--color-neutral-100);
+  --color-neutral-200: var(--color-neutral-200);
+  --color-neutral-300: var(--color-neutral-300);
+  --color-neutral-400: var(--color-neutral-400);
+  --color-neutral-450: var(--color-neutral-450);
+  --color-neutral-500: var(--color-neutral-500);
+  --color-neutral-600: var(--color-neutral-600);
+  --color-neutral-650: var(--color-neutral-650);
+  --color-neutral-700: var(--color-neutral-700);
+  --color-neutral-800: var(--color-neutral-800);
+  --color-neutral-900: var(--color-neutral-900);
+  --color-neutral-950: var(--color-neutral-950);
+  --color-neutral-1000: var(--color-neutral-1000);
+
+  --color-neutral-variant: var(--color-neutral-variant);
+  --color-neutral-variant-0: var(--color-neutral-variant-0);
+  --color-neutral-variant-50: var(--color-neutral-variant-50);
+  --color-neutral-variant-100: var(--color-neutral-variant-100);
+  --color-neutral-variant-200: var(--color-neutral-variant-200);
+  --color-neutral-variant-300: var(--color-neutral-variant-300);
+  --color-neutral-variant-400: var(--color-neutral-variant-400);
+  --color-neutral-variant-450: var(--color-neutral-variant-450);
+  --color-neutral-variant-500: var(--color-neutral-variant-500);
+  --color-neutral-variant-600: var(--color-neutral-variant-600);
+  --color-neutral-variant-650: var(--color-neutral-variant-650);
+  --color-neutral-variant-700: var(--color-neutral-variant-700);
+  --color-neutral-variant-800: var(--color-neutral-variant-800);
+  --color-neutral-variant-900: var(--color-neutral-variant-900);
+  --color-neutral-variant-950: var(--color-neutral-variant-950);
+  --color-neutral-variant-1000: var(--color-neutral-variant-1000);
+
+  --color-primary: var(--sys-primary);
+  --color-primary-0: var(--color-primary-0);
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-450: var(--color-primary-450);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-650: var(--color-primary-650);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-primary-950: var(--color-primary-950);
+  --color-primary-1000: var(--color-primary-1000);
+
+  --color-secondary: var(--sys-secondary);
+  --color-secondary-0: var(--color-secondary-0);
+  --color-secondary-50: var(--color-secondary-50);
+  --color-secondary-100: var(--color-secondary-100);
+  --color-secondary-200: var(--color-secondary-200);
+  --color-secondary-300: var(--color-secondary-300);
+  --color-secondary-400: var(--color-secondary-400);
+  --color-secondary-450: var(--color-secondary-450);
+  --color-secondary-500: var(--color-secondary-500);
+  --color-secondary-600: var(--color-secondary-600);
+  --color-secondary-650: var(--color-secondary-650);
+  --color-secondary-700: var(--color-secondary-700);
+  --color-secondary-800: var(--color-secondary-800);
+  --color-secondary-900: var(--color-secondary-900);
+  --color-secondary-950: var(--color-secondary-950);
+  --color-secondary-1000: var(--color-secondary-1000);
+
+  --color-tertiary: var(--sys-tertiary);
+  --color-tertiary-0: var(--color-tertiary-0);
+  --color-tertiary-50: var(--color-tertiary-50);
+  --color-tertiary-100: var(--color-tertiary-100);
+  --color-tertiary-200: var(--color-tertiary-200);
+  --color-tertiary-300: var(--color-tertiary-300);
+  --color-tertiary-400: var(--color-tertiary-400);
+  --color-tertiary-450: var(--color-tertiary-450);
+  --color-tertiary-500: var(--color-tertiary-500);
+  --color-tertiary-600: var(--color-tertiary-600);
+  --color-tertiary-650: var(--color-tertiary-650);
+  --color-tertiary-700: var(--color-tertiary-700);
+  --color-tertiary-800: var(--color-tertiary-800);
+  --color-tertiary-900: var(--color-tertiary-900);
+  --color-tertiary-950: var(--color-tertiary-950);
+  --color-tertiary-1000: var(--color-tertiary-1000);
+
+  --color-error: var(--sys-error);
+  --color-error-0: var(--color-error-0);
+  --color-error-50: var(--color-error-50);
+  --color-error-100: var(--color-error-100);
+  --color-error-200: var(--color-error-200);
+  --color-error-300: var(--color-error-300);
+  --color-error-400: var(--color-error-400);
+  --color-error-450: var(--color-error-450);
+  --color-error-500: var(--color-error-500);
+  --color-error-600: var(--color-error-600);
+  --color-error-650: var(--color-error-650);
+  --color-error-700: var(--color-error-700);
+  --color-error-800: var(--color-error-800);
+  --color-error-900: var(--color-error-900);
+  --color-error-950: var(--color-error-950);
+  --color-error-1000: var(--color-error-1000);
+}
+
+:root {
+  --mat-form-field-outlined-container-shape: 14px;
+}
+
+.pre {
+  background: var(--color-surface-container);
+  padding: --spacing(3);
+  border-radius: theme(--radius-2xl);
+  margin: --spacing(3) 0;
+}