@use '../../../vendor/twbs/bootstrap/scss/bootstrap' as *;
@use "../../../assets/styles/variables" as variables;
@use 'data2ui_mini-bootstrap';

.line {
  fill: none;
}

path.temperature_line {
  stroke: variables.$primary;
  stroke-width: 3px;
}

path.pressure_line {
  stroke: darkgreen;
}

circle.temperature_line {
  fill: variables.$primary;
}

.windDir {
  stroke: black;
}

rect.rain {
  fill: lightblue;
}

.grid--x path {
  stroke: none;
}

.grid line, .grid--y path {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.date_text {
  font-size: 2rem;
}

.moving * {
  opacity: 0.2;
}

#forecastGraph {
  min-height: 400px;
}

#date_1ppday, #date_1ppdayTab, #date_1ppdayGraph {
  color: darken($primary,10%);
  text-transform: capitalize;
  padding-top: 10px;
}

.value_1ppday {
  font-weight: bold;
}

.backward-button, .forward-button {
  &:disabled {
    i {
      color: variables.$secondary;
    }
  }
}

#forecastTable {
  display: flex;
  font-size: 0.9rem;
  vertical-align: middle;
  .content {
    width: 100%;
    padding: 0;
    margin: 0;
    justify-content: safe start;
    .measure-column {
      text-align: center;
      padding: 0;
      min-width: 100px;
      transition: linear 0.4s;
      > div {
        background: #ffffff;
        border-bottom: solid 1px #f2f2f2;
        border-right: solid 1px #f2f2f2;
        &:not(:first-child) {
          color: lighten($primary, 10%);
        }
      }
      &:nth-child(odd) {
        > div {
          background: #f8f8f8;
        }
      }
      &:hover {
        > div {
          background: lighten($primary,45%) !important;
          color: #ffffff;
          border-bottom: solid lighten($primary, 55%) 1px;
        }
      }
    }
  }
  .first-column {
    padding: 0;
    text-align: left;
    font-weight: 600;
    > div {
      background: darken($secondary, 20%);
      text-align: right;
      color: #ffffff;
      padding-right: 15px;
      border-bottom: 1px solid darken($secondary, 15%);
      @media (max-width: 576px) {
        min-width: 120px;
      }
    }
  }
  .date-row {
    position: absolute;
    text-align: left;
    height: 20px;
    width: 100%;
    overflow-x: hidden;
  }
  .hour-row {
    font-weight: bold;
  }
  .date-row, .hour-row,
  .temperature-row, .wind-row,
  .winddir-row, .windgust-row, .humidity-row,
  .rain-row, .etp-row {
    padding: 10px 0;
  }
  .weather-row {
    img {
      height: 40px;
    }
    padding: 10px 0;
    height: 60px;
  }
  .measure-column:hover {
    background: variables.$tertiary;
    color: #ffffff;
    > .weather-row {
      background: #FFFFFF;
    }
    .date-row,
    .temperature-row, .wind-row,
    .winddir-row, .windgust-row, .humidity-row,
    .rain-row, .etp-row {
      color: #FFFFFF;
    }
    .hour-row {
      color: #FFFFFF;
    }
  }
}

#forecastSummary {
  display: flex;
  vertical-align: middle;
  .content {
    width: 100%;
    padding: 0;
    margin: 0;
    justify-content: safe start;
    .measure-column {
      text-align: center;
      padding: 15px 0;
      width: 100px;
      cursor: pointer;
      background: #f9f9f9;
      margin-right: 5px;
      margin-bottom: 5px;
      transition:linear 0.4s;
      &:hover, &.active {
        background: darken($secondary,10%);
        color: #ffffff;
        .date-row, .temperature-row, .weather-row {
          border: 0;
        }
      }
    }
  }
  .date-row {
    font-weight: bold;
    padding: 0;
  }
  .temperature-row {
    padding: 0;
    display: flex;
    justify-content: space-around;
  }
  .weather-row {
    img {
      height: 40px;
    }
    padding: 10px 0;
    height: 60px;
  }

  @keyframes blink {
    from {
      background-color: variables.$secondary;
    }
    to {
      background-color: white;
    }
  }

  .measure-column.almost-active {
    background: variables.$secondary;
    color: white;
    animation-name: blink;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;
  }

}