@reference 'tailwindcss';

:host {
  --emr-incidents-bar-height: --spacing(24);
  --emr-incidents-bar-bg: var(--color-orange-container);
  --emr-incidents-bar-padding: 0 --spacing(8);
  --emr-incidents-bar-color: var(--color-on-orange-container);
  --emr-incidents-bar-box-shadow: none;
  --emr-incidents-bar-hover-box-shadow: theme(--shadow-sm);
  --emr-incidents-list-bg: rgba(0, 0, 0, .32);
  --emr-incidents-list-gap: --spacing(5);
  --emr-incidents-list-padding: --spacing(7) 0;
  --emr-incident-bg: white;
  --emr-incident-color: var(--color-neutral-700);
  --emr-incident-border-radius: theme(--radius-md);
  --emr-incident-padding: --spacing(4) --spacing(6);
  --emr-incident-gap: --spacing(6);
  --emr-incident-border-start: --spacing(1) solid var(--color-neutral-900);
  --emr-incident-close-color: var(--color-neutral-500);
  --emr-incident-close-hover-color: var(--color-neutral-900);
  --emr-incident-title-font-size: theme(--text-sm);
  --emr-incident-title-font-weight: 500;
  --emr-incident-details-font-size: theme(--text-sm);
  --emr-incident-details-color: var(--color-neutral-500);
  --emr-incidents-title-font-size: var(--text-base);
  --emr-incidents-title-font-weight: 500;
  --emr-incidents-description-font-size: theme(--text-sm);
  --emr-incidents-description-opacity: 80%;

  display: contents;

  .list-container {
    display: none;
    height: calc(100vh - var(--emr-layout-top-header-top) + var(--emr-layout-top-header-height));
  }
}

:host-context(html.dark) {
  --emr-incidents-list-bg: rgba(255, 255, 255, .32);
}
