.weather-forecast-widget {
  @include newtab-card-style;

  grid-column: span 1;
  width: var(--newtab-card-grid-layout-width);

  // Match the new card width if sections are enabled
  .has-sections-grid & {
    width: var(--newtab-card-width-medium);
  }

  border-radius: var(--border-radius-large);
  padding: var(--space-medium);
  height: var(--newtab-card-height);
  display: flex;
  flex-direction: column;
  box-shadow: var(--box-shadow-card);

  --weather-sunny-background-color: light-dark(var(--color-yellow-0), var(--color-yellow-90));
  --weather-cloudy-background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
  --weather-rainy-background-color: light-dark(var(--color-blue-0), var(--color-blue-90));
  --weather-snowy-background-color: light-dark(var(--color-violet-0), var(--color-violet-90));
  --weather-hot-background-color: light-dark(var(--color-orange-0), var(--color-orange-90));

  .city-wrapper {
    display: flex;
    align-items: center;

    h3 {
      margin-block: 0;
      font-weight: var(--font-weight-semibold);
    }
  }

  .current-weather-wrapper {
    display: flex;
    align-items: center;
    margin-block: var(--space-small);
    padding: var(--space-medium);
    border-radius: var(--border-radius-medium);
    width: 100%;

    // Setting background color based on temperature icon
    &:has(.iconId1, .iconId2, .iconId3, .iconId4, .iconId5, .iconId6, .iconId33) {
      background-color: var(--weather-sunny-background-color);
    }

    &:has(.iconId7, .iconId8, .iconI11, .iconId32, .iconId34, .iconId35, .iconId36, .iconId37, .iconId38) {
      background-color: var(--weather-cloudy-background-color);
    }

    &:has(.iconId12, .iconId13, .iconId14, .iconId15, .iconId16, .iconId17, .iconId18, .iconId39, .iconId40, .iconId41, .iconId42) {
      background-color: var(--weather-rainy-background-color);
    }

    &:has(.iconId19, .iconId20, .iconId21, .iconId22, .iconId23, .iconId24, .iconId25, .iconId26, .iconId29, .iconId31, .iconId43, .iconId44 ) {
      background-color: var(--weather-snowy-background-color);
    }

    &:has(.iconId30) {
      background-color: var(--weather-hot-background-color);
    }
  }

  // Weather Symbol Icons
  .weather-icon-column {
    width: var(--size-item-large);
    height: var(--size-item-large);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }

  .weather-icon {
    width: var(--size-item-large);
    height: auto;
    vertical-align: middle;

    @media (prefers-contrast) {
      -moz-context-properties: fill, stroke;
      fill: currentColor;
      stroke: currentColor;
    }

    &.iconId1 {
      content: url('chrome://browser/skin/weather/sunny.svg');
    }

    &.iconId2 {
      content: url('chrome://browser/skin/weather/mostly-sunny.svg');
    }

    &:is(.iconId3, .iconId4, .iconId6) {
      content: url('chrome://browser/skin/weather/partly-sunny.svg');
    }

    &.iconId5 {
      content: url('chrome://browser/skin/weather/hazy-sunshine.svg');
    }

    &:is(.iconId7, .iconId8) {
      content: url('chrome://browser/skin/weather/cloudy.svg');
    }

    &.iconId11 {
      content: url('chrome://browser/skin/weather/fog.svg');
    }

    &.iconId12 {
      content: url('chrome://browser/skin/weather/showers.svg');
    }

    &:is(.iconId13, .iconId14) {
      content: url('chrome://browser/skin/weather/mostly-cloudy-with-showers.svg');
    }

    &.iconId15 {
      content: url('chrome://browser/skin/weather/thunderstorms.svg');
    }

    &:is(.iconId16, .iconId17) {
      content: url('chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg');
    }

    &.iconId18 {
      content: url('chrome://browser/skin/weather/rain.svg');
    }

    &:is(.iconId19, .iconId20, .iconId25) {
      content: url('chrome://browser/skin/weather/flurries.svg');
    }

    &.iconId21 {
      content: url('chrome://browser/skin/weather/partly-sunny-with-flurries.svg');
    }

    &:is(.iconId22, .iconId23) {
      content: url('chrome://browser/skin/weather/snow.svg');
    }

    &:is(.iconId24, .iconId31) {
      content: url('chrome://browser/skin/weather/ice.svg');
    }

    &:is(.iconId26, .iconId29) {
      content: url('chrome://browser/skin/weather/freezing-rain.svg');
    }

    &.iconId30 {
      content: url('chrome://browser/skin/weather/hot.svg');
    }

    &.iconId32 {
      content: url('chrome://browser/skin/weather/windy.svg');
    }

    &.iconId33 {
      content: url('chrome://browser/skin/weather/night-clear.svg');
    }

    &:is(.iconId34, .iconId35, .iconId36, .iconId38) {
      content: url('chrome://browser/skin/weather/night-mostly-clear.svg');
    }

    &.iconId37 {
      content: url('chrome://browser/skin/weather/night-hazy-moonlight.svg');
    }

    &:is(.iconId39, .iconId40) {
      content: url('chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg');
      height: var(--size-item-large);
    }

    &:is(.iconId41, .iconId42) {
      content: url('chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg');
    }

    &:is(.iconId43, .iconId44) {
      content: url('chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg');
    }
  }
}

.weather-info-column {
  display: flex;
  flex-direction: column;
  margin-inline: var(--space-medium);

  .temperature-unit {
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
  }

  .temperature-description {
    font-size: var(--font-size-small);
    color: var(--text-color-deemphasized);
  }
}

.high-low-column {
  display: flex;
  align-items: flex-end;
  align-self: flex-start;
  margin-inline-start: auto;
  color: var(--text-color-deemphasized);

  .high-temperature {
    margin-inline-end: var(--space-small);
  }

  .arrow-icon {
    display: inline-block;
    width: var(--size-item-xsmall);
    height: var(--size-item-xsmall);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;

    &.arrow-up {
      background-image: url('chrome://global/skin/icons/shaft-arrow-up.svg');
    }

    &.arrow-down {
      background-image: url('chrome://global/skin/icons/shaft-arrow-down.svg');
    }
  }
}

hr {
  border: 0;
  border-block-start: 1px solid var(--border-color);
  width: 100%;
}

.forecast-row {
  .today-forecast {
    margin-block-start: 0;
    font-weight: var(--font-weight-semibold);
  }

  .forecast-row-items {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-block-start: var(--space-small);

    li {
      background: var(--newtab-background-color);
      border-radius: var(--border-radius-small);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-inline: var(--space-xsmall);
      padding-inline: var(--space-small);
      padding-block: var(--space-xsmall);
      font-size: var(--font-size-small);
    }
  }
}

.weather-forecast-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: auto;

  a {
    font-size: var(--font-size-small);
  }

  span {
    font-size: var(--font-size-xsmall);
  }
}