/** CSS for a step-time graph view component. */

@use 'frontend/app/styles/common';

:host {
  @include common.border-bottom-gray;
  @include common.border-right-gray;
}

:host:not(.dark-theme) {
  mat-card {
    @include common.overview-card;
  }
}

mat-card {
  @include common.overview-card-height;
}

mat-card-title {
  @include common.overview-card-title;
}

.chart {
  margin: 0 auto;
  max-width: 800px;
}

:host.dark-theme {
  border: none;

  mat-card {
    @include common.overview-card-dark-theme;
  }

  mat-card-title {
    background-color: common.$dark-theme-card-title-background-color;
    color: common.$dark-theme-card-title-color;
    padding: 16px;
    margin: -16px -16px 16px;
  }
}
