@import '../base/color';
@import '../base/breakpoint';

.cv {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 27.5rem;
  @media #{$large-phone} {
      width: 100%;
  }
  .cv-content-date {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    // margin-top: 1em;
    .cv-date-group {
      display: flex;
      flex-direction: column;
      width: 38vw;
      align-items: center;
      align-self: center;
      .cv-date {
        color: $google-text-1;
        &::first-letter {
          text-transform: uppercase;
        }
      }
    }
  }
  .cv-load {
    min-height: 5.25rem;
    display: flex;
    align-items: center;
    .cv-load-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      .cv-load-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem 0.5rem;
        &.cv-load-section-left {
          align-items: flex-end;
        }
        &.cv-load-section-right {
          align-items: flex-start;
        }
        .cv-load-value {
          flex-direction: row;
          & span {
            align-self: flex-end;
            margin-left: 0.5em;
          }
        }
      }
    }
  }
  .cv-euro {
    display: flex;
    flex-direction: row;
    .cv-euro-link {
      text-decoration: none;
      color: transparent;
    }
    .cv-euro-fluid {
      padding: 0 0.5rem;
      display: flex;
      align-items: center;
      .cv-euro-fluid-icon {
        margin-right: 0.5rem;
      }
      & div {
        padding-top: 0.2rem;
      }
    }
  }
  .cv-info {
    min-height: 1.5rem;
    display: flex;
    align-items: center;
  }
  .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: $text-white;
  }
  .multifluid-compare {
    color: $multi-compare-color;
  }
  .error {
    color: $red-no-data;
  }
  .error-line {
    color: $red-no-data;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .underlined-error {
    border-bottom: solid 1px $red-no-data;
  }
  .warning-icon {
    margin-right: 4px;
  }
  .multifluid-compare {
    color: $multi-compare-color;
  }
  .cv-button {
    border: none;
    background: none;
    color: $google-text-2;
    text-decoration: underline;
  }
}