@import "_common.scss";

.plant-image {
  width: 100%;
  display: flex;
  margin: auto;
  border-radius: .5em;
  color: $highlight-text;
  box-shadow: 0.5em 0.5em $highlight;
  position: relative;

  a {
    color: $highlight-text;
  }

  .image-source {
    position: absolute;
    padding: 0.25em;
    border-radius: 0.25em;
    margin: 0.25em;
    bottom: 0;
    right: 0;
    font-size: 0.8em;
    background-color: transparentize($highlight, 0.75); 
  }

  img {
    border-radius: .5em;
    width: 100%;
  }

  &:hover .image-source {
    background-color: $highlight;      
  }
}

.temp-bar {
  height: 1em;
  width: 100%;
  display: flex;
  position: relative;
  margin-bottom: 0.5em;

  .temp {
    height: 1em;
    display: flex;
    position: relative;

    label {
      font-size: 0.9em;
      display: flex;
      margin: -0.1em auto 0;
      white-space: nowrap;
      z-index: 3;

      .icon {
        padding-right: 0.25em;
        margin-top: 0.15em;
        line-height: 1;
      }
    }
  }

  .shadow-pseudo {
    height: 1em;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0.35em 0.35em $highlight;
    border-radius: 1em;
  }

  .lower-temp-death {
    text-align: right;
    border-radius: 1em 0 0 1em;
    background-image: linear-gradient(to right, $red, $yellow);

    label {
      right: 0;
    }
  }

  .lower-temp-live {
    background-image: linear-gradient(to right, $yellow, $blue);
  }

  .temp-live {
    background-color: $blue;
    text-align: center;
  }

  .upper-temp-live {
    background-image: linear-gradient(to right, $blue, $yellow);
    border-radius: 0 1em 1em 0;

    label: {
      left: 0;
    }
  }
}