@import url('../../../style/list-entry.scss');
@import url('../../../style/hide-scrollbar.scss');

.fraction-stats-container {
  border-top: 1px solid #dadada;
  padding-top: 25px;
}

.chart-select-group {
  display: flex;
  width: fit-content;
  margin: auto;
}

:host /deep/ mat-button-toggle {
  color: #666666;
  background: #e7e7e7;

  :hover {
    background: #afafaf;
  }

  &.mat-button-toggle-checked {
    background: #ffffff;
  }

  label.mat-button-toggle-label {
    margin: 2px 0;
  }

  div.mat-button-toggle-label-content {
    line-height: 25px;
    margin-bottom: 0;
    font-weight: normal;
  }
}

.chart-container {
  width: 95%;
  margin: 2%;
  min-width: 900px;
  height: 50vh;
  padding: 15px;
  float: left;
}

@media all and (max-width: 959px) {
  .fraction-stats-container {
    width: 93%;
    margin: auto;
  }

  .chart-container {
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 10px 0 0;
  }

  .chart-select-group {
    flex-wrap: wrap;
  }

  mat-button-toggle.mat-button-toggle {
    width: 50%;
    border: 1px solid #dadada;
    text-align: center;

    & /deep/ button.mat-button-toggle-button, & /deep/ div.mat-button-toggle-label-content {
      width: 100%;
    }
  }
}