:host {
  color: rgb(var(--dark-primary-text));
  display: block;

  .chart-container {
    aspect-ratio: 16 / 9;
    cursor: pointer;
    margin-top: -1rem;
    max-height: 50vh;

    // Fallback for aspect-ratio (using padding hack)
    @supports not (aspect-ratio: 16 / 9) {
      &::before {
        float: left;
        padding-top: 56.25%;
        content: '';
      }

      &::after {
        display: block;
        content: '';
        clear: both;
      }
    }

    gf-line-chart {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: -1;
    }
  }

  ::ng-deep {
    .mat-form-field-infix {
      border-top: 0 solid transparent !important;
    }

    .mat-form-field-wrapper {
      padding-bottom: 0 !important;
    }

    .mat-form-field-underline {
      bottom: 0 !important;
    }

    .mat-form-field-appearance-outline .mat-select-arrow-wrapper {
      transform: translateY(0);
    }
  }
}

:host-context(.is-dark-theme) {
  color: rgb(var(--light-primary-text));
}