dataloadConsumptionVisualizer.scss

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

.dataloadvisualizer-root {
  min-height: 5.719rem;
  display: flex;
  align-items: center;
}
.dataloadvisualizer-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: $grey-bright;

  &.error {
    cursor: pointer;
    color: $red-primary;
    font-weight: bold;
    text-decoration: underline;
  }

  .dataloadvisualizer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    .no-data-text {
      cursor: pointer;
      color: $grey-bright;
      border-bottom: solid 1px $grey-bright;
      margin-top: 1rem;
    }
    &.dataloadvisualizer-section-left {
      align-items: flex-end;
      padding: 0.5rem 0.5rem;
    }

    &.dataloadvisualizer-section-left-novalue {
      align-items: flex-start;
      padding: 0.5rem 0.5rem 0.5rem 0;
    }
    &.dataloadvisualizer-section-right {
      align-items: flex-start;
      padding: 0.5rem 0.5rem;
    }
    .dataloadvisualizer-value {
      flex-direction: row;
      & span {
        align-self: flex-end;
        margin-left: 0.5em;
      }
      .euroUnit {
        margin-left: 0.4em;
        position: relative;
        top: -12px;
      }
      .estimated {
        cursor: pointer;
        font-weight: 500;
        text-decoration: underline;
        margin-left: 0.5rem;
        position: relative;
        top: -12px;
      }
    }
    .upper {
      font-weight: bold;
      &:first-letter {
        text-transform: uppercase;
      }
    }
    .electricity {
      color: $elec-color;
    }
    .electricity-compare {
      color: $elec-compare-color;
    }
    .water {
      color: $water-color;
    }
    .water-compare {
      color: $water-compare-color;
    }
    .gas {
      color: $gas-color;
    }
    .gas-compare {
      color: $gas-compare-color;
    }
    .multifluid {
      color: $white;
    }
    .multifluid-compare-color {
      color: $gold-light;
    }
    .multifluid-compare {
      color: $multi-compare-color;
    }
    .error {
      color: $red-primary;
    }
  }
}
.dataloadvisualizer-euro {
  display: flex;
  flex-direction: row;
  min-height: 2rem;
  align-items: center;
  .dataloadvisualizer-euro-link {
    text-decoration: none;
    color: transparent;
  }
  .dataloadvisualizer-euro-fluid {
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    .dataloadvisualizer-euro-fluid-icon {
      margin-right: 0.5rem;
    }
  }
  .electricity {
    color: $elec-color;
  }
  .electricity-compare {
    color: $elec-compare-color;
  }
  .water {
    color: $water-color;
  }
  .water-compare {
    color: $water-compare-color;
  }
  .gas {
    color: $gas-color;
  }
  .gas-compare {
    color: $gas-compare-color;
  }
  .multifluid {
    color: $white;
  }
  .multifluid-compare {
    color: $multi-compare-color;
  }
  .error {
    color: $red-primary;
  }
}