@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;
}
