maxConsumptionCard.scss

@import 'src/styles/base/color';

.max-consumption-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: $white;
  .fluid-navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 45.75rem;
    width: 100%;
    div {
      font-weight: 900;
    }
  }
  .fluid {
    min-width: 120px;
    text-align: center;
    margin: auto;
  }
  .electricity {
    color: $elec-color;
  }
  .water {
    color: $water-color;
  }
  .gas {
    color: $gas-color;
  }
  .no_data {
    color: white;
  }
  .data-container {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .loaderContainer {
      height: 22rem;
      display: flex;
    }
    .maxDay-date {
      text-transform: capitalize;
      margin: 0.5rem 0;
      text-align: center;
    }
    .maxDay-load span {
      font-size: 2rem;
      font-weight: 700;
    }
  }
}

.dataloadvisualizer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fluidMaxButton {
  border-radius: 4px;
  width: 80px;
  &:hover,
  &.active {
    background: $bg-active;
  }

  .MuiIconButton-label {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .fluidLabel {
      color: $white;
    }
  }
}