@import "../../styles/variables";

.chart-container {
  display: flex;
  justify-content: space-between;
  background-color: $chef-white;
  padding: 0 20px;
  width: 50%;
  border-radius: $global-radius;

  .label {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: inherit;
  }

  h2 {
    font-weight: 400;
  }

  .chart-legend {
    .display5 {
      font-weight: bold;
      line-height: 16px;
      margin-top: 10px;

      .success {
        font-size: inherit;
        color: $chef-success;
      }

      .failure {
        font-size: inherit;
        color: $chef-critical;
      }

      .missing {
        font-size: inherit;
        color: $chef-dark-grey;
      }
    }
  }

}

chef-radial-chart {
  width: 250px;
  height: 250px;

  ::ng-deep .failed {
    color: $chef-critical;
    fill: $chef-critical;
    stroke: $chef-critical;
  }

  ::ng-deep .success {
    color: $chef-success;
    fill: $chef-success;
    stroke: $chef-success;
  }

  ::ng-deep .missing {
    color: $chef-dark-grey;
    fill: $chef-dark-grey;
    stroke: $chef-dark-grey;
  }
}
