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

  position: relative;
  text-decoration: none;
  border-radius: var(--border-radius-large);
  padding: var(--space-medium);
  box-shadow: var(--card-box-shadow);
  display: flex;
  flex-direction: column;

  // Classic layout (when Nova is disabled)
  // @nova-cleanup(remove-conditional): Remove classic fixed-width/height styles after Nova ships
  .classic-enabled & {
    grid-column: span 1;
    width: var(--newtab-card-grid-layout-width);
    height: var(--newtab-card-height);

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



  --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;
    justify-content: space-between;
    margin-block-end: var(--space-xsmall);

    .city-name {
      width: 100%;
    }

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

    .location-input-wrapper {
      padding-block: 0;

      input {
        width: 100%;
      }
    }
  }

  .forecast-anchor {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--border-radius-large);
    text-decoration: none;
  }

  // Make sure context menu is only visible as you hover over the Weather Forecast widget
  .weather-forecast-context-menu-wrapper {
    position: relative;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
  }

  &:hover {
    background: var(--newtab-background-card);

    .sponsored-text {
      visibility: visible;
    }
  }

  &:hover,
  &:focus-within {
    .full-forecast {
      text-decoration: underline;
      color: var(--newtab-primary-action-background);
    }
  }

  &:hover,
  &:focus-within {
    .weather-forecast-context-menu-wrapper {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .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%;
  }


  .current-weather-wrapper,
  &.small-widget .forecast-row-items > li:first-of-type {
    // 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, .iconId11, .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);
    }
  }

  &.forecast-error-state {
    .full-forecast {
      display: none;
    }
  }

  .forecast-error {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    margin-block-start: auto;

    p {
      font-size: var(--font-size-small);
      color: var(--text-color-deemphasized);
    }
  }


  // Weather Symbol Icons
  .weather-icon-column {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    .weather-icon {
      width: var(--size-item-large);
    }
  }

  .weather-icon {
    width: var(--size-item-medium);
    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: var(--space-small);
    font-weight: var(--font-weight-semibold);
  }

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

    li {
      background: var(--newtab-background-color);
      border-radius: var(--border-radius-small);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-inline: var(--space-xxsmall);
      padding: var(--space-small) var(--space-medium);
      font-size: var(--font-size-small);

      &:first-of-type {
        margin-inline-start: 0;
      }

      &:last-of-type {
        margin-inline-end: 0;
      }
    }
  }
}

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

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

  .sponsored-text {
    visibility: hidden;
  }

  .full-forecast {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-xsmall);
    text-decoration: none;
    color: inherit;
  }
}

// Styles for the small version of Weather Forecast widget
.small-widget {
  height: 100%;
  padding: var(--space-small);

  .forecast-error {
    flex-direction: row;
    justify-content: flex-start;

    span {
      margin-inline-end: var(--space-small);
    }

  }

  .forecast-row-items {
    li {
      padding: var(--space-xsmall) var(--space-medium);
    }
  }

  .forecast-footer {
    margin-block-start: auto;

    .full-forecast {
      display: none;
    }
  }

  &:has(.location-search) {
    .forecast-row-items {
      display: none;
    }
  }
}
