/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2018, 2019. All Rights Reserved.
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure 
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 *******************************************************************************/
@import 'node_modules/carbon-components/scss/globals/scss/_colors';
@import 'variables';

/* *********************  pie card ************************ */

.pie-graph {
  display: flex;
  align-items: center;
  width: calc(#{$overview-column-width} * 52 - #{$overview-card-margin-right});
  height: 226px;
  position: relative;
  padding: 31px 0px 31px 31px;

  &__container {
    padding-right: 35px;
    &::after {
      content: " ";
      position: absolute;
      top: 0;
      left: 11.5rem;
      height: 100%;
      border-right: 1px solid $color__gray-1;
    }
  }

  &__legend {
    margin-left: 1.9375rem;
    min-width: 6.5626rem;
    max-width: 9.375rem;
    width: 100%;

    .legend-item {
      margin-bottom: 1.3125rem;
      padding-bottom: .3125rem;
      color: $color__blue-90;
      font-size: .875rem;

      > a, div {
        justify-content: space-between;
        width: 100%;
        display: flex;
      }

      > a {
        color: black;
        text-decoration: none;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .value {
        font-weight: 300;
      }

      .label {
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 1.5rem;
      }
    }
  }
}

.recharts-pie-sector path {
  stroke-width: 2px;
}

.recharts-sector {
  &.ready {
    fill: $mcm_color_green;
  }
  &.offline {
    fill: $mcm_color_gray;
  }
  &.compliant {
    fill: $mcm_color_green;
  }
  &.noncompliant {
    fill: $mcm_color_red;
  }
  &.non-compliant {
    fill: $mcm_color_red;
  }
  &.running {
    fill: $mcm_color_green;
  }
  &.pending {
    fill: $mcm_color_yellow;
  }
  &.failed {
    fill: $mcm_color_red;
  }
  &.available {
    fill: $mcm__available_color;
  }
  &.used {
    fill: $mcm__used_color;
  }
}

.legend-item.bottom_border {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  &.ready {
    border-bottom-color: $mcm_color_green;
  }
  &.offline {
    border-bottom-color: $mcm_color_gray;
  }
  &.compliant {
    border-bottom-color: $mcm_color_green;
  }
  &.noncompliant {
    border-bottom-color: $mcm_color_red;
  }
  &.non-compliant {
    border-bottom-color: $mcm_color_red;
  }
  &.running {
    border-bottom-color: $mcm_color_green;
  }
  &.pending {
    border-bottom-color: $mcm_color_yellow;
  }
  &.failed {
    border-bottom-color: $mcm_color_red;
  }
  &.available {
    border-bottom-color: $mcm__available_color;
  }
  &.used {
    border-bottom-color: $mcm__used_color;
  }
}

/* *********************  line chart ************************ */

.line-graph-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .line-graph-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    color: $color__blue-90;
    width: 435px;

    > div {
      padding-bottom: .3125rem;
      display: flex;
      align-items: center;
      flex-basis: 50%;
      justify-content: space-between;

      &:not(:last-child) {
        margin-right: 1.25rem;
      }
      .label {
        padding-right: .625rem;
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: .2px;
      }
      .supplemental {
        font-weight: 300;
        font-size: 0.75rem;
        letter-spacing: .2px;
        white-space: nowrap;
      }
    }
  }

  .line-graph {
    width: calc(#{$overview-column-width} * 52 - #{$overview-card-margin-right});
    height: 175px;
    padding: 30px 24px;
  }

}

.recharts-layer {
  circle {
    stroke-width: 2;
    fill: none;
  }

  path.recharts-area-curve {
    stroke-width: 2;
  }

  path.recharts-area-area {
    stroke: none;
    fill: none;
  }
}

.recharts-layer.available {
  circle {
    stroke: $mcm__available_color;
    fill: $mcm__used_color;
    fill-opacity: .3;
  }

  path.recharts-area-curve {
    stroke: $mcm__available_color;
    stroke-width: 2;
  }
}

.recharts-layer.used {
  circle {
    stroke: $mcm__used_color;
    fill: $mcm__used_color;
    fill-opacity: .3;
  }

  path.recharts-area-curve {
    stroke: $mcm__used_color;
  }

  path.recharts-area-area {
    fill: $mcm__used_color;
    fill-opacity: .3;
  }
}

.recharts-layer.running, .recharts-layer.ready, .recharts-layer.compliant {
  circle {
    stroke: $mcm_color_green;
  }

  path.recharts-area-curve {
    stroke: $mcm_color_green;
  }
}

.recharts-layer.pending {
  circle {
    stroke: $mcm_color_yellow;
  }

  path.recharts-area-curve {
    stroke: $mcm_color_yellow;
  }
}

.recharts-layer.failed, .recharts-layer.noncompliant, .recharts-layer.non-compliant {
  circle {
    stroke: $mcm_color_red;
  }

  path.recharts-area-curve {
    stroke: $mcm_color_red;
  }
}

.recharts-layer.offline {
  circle {
    stroke: $mcm_color_gray;
  }

  path.recharts-area-curve {
    stroke: $mcm_color_gray;
  }
}

.line-graph-tooltip {
  color: $color__blue-90;
  font-size: .875rem;
  background: $color__white;
  border: 1px solid $color__gray-1;
  padding: 10px;
  line-height: 1.3;

  .timestamp { font-weight: 700; }

  .data {
    font-weight: 300;
    display: flex;
    flex-direction: row;
    .circle {
      margin: auto 5px auto 0;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      &.available { background: $mcm__available_color; }
      &.used { background: $mcm__used_color; }
      &.running { background: $mcm_color_green; }
      &.pending { background: $mcm_color_yellow; }
      &.failed { background: $mcm_color_red; }
      &.ready { background: $mcm_color_green; }
      &.compliant { background: $mcm_color_green; }
      &.noncompliant { background: $mcm_color_red; }
      &.non-compliant { background: $mcm_color_red; }
      &.offline { background: $mcm_color_gray; }
    }
  }
}
