@reference 'tailwindcss';

:host {
  --emr-mchart-line-line-bg: var(--color-primary);
  --emr-mchart-line-area-bg: var(--color-primary-200);
  --emr-mchart-line-marker-line-bg: var(--color-neutral);
  --emr-mchart-line-marker-dot-bg: var(--color-primary);
  --emr-mchart-line-area-gradient-start-color: var(--color-primary);
  --emr-mchart-line-area-gradient-end-color: var(--color-background);

  display: block;
  overflow: hidden;

  svg {
    width: 100%;
    height: 100%;
  }

  ::ng-deep {
    .line {
      stroke: var(--emr-mchart-line-line-bg);
      fill: none;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .area {
      stroke-width: 0;
    }

    .marker-line {
      stroke: var(--emr-mchart-line-marker-line-bg);
      stroke-width: 1;
      stroke-dasharray: 3;
    }

    .marker-dot {
      fill: var(--emr-mchart-line-marker-dot-bg);
    }
  }

  &:not(.fill-area-gradient) {
    ::ng-deep {
      .area {
        fill: var(--emr-mchart-line-area-bg);
      }
    }
  }

  &.fill-area-gradient {
    .lg-start-color {
      stop-color: var(--emr-mchart-line-area-gradient-start-color);
    }

    .lg-end-color {
      stop-color: var(--emr-mchart-line-area-gradient-end-color);
    }
  }
}

:host-context(html.dark) {
  --emr-mchart-line-area-bg: var(--color-neutral-700);
  --emr-mchart-line-area-gradient-start-color: var(--color-neutral-700);
}
