/* ==UserStyle==
@name           SMHI Dark (Ten day forecast)
@namespace      github.com/aruncveli/userstyles
@version 25.7.29
@description    Dark theme for SMHI's ten day forecast page
@author         Arun Chandanaveli <aruncveli@gmail.com> (https://github.com/aruncveli)
@homepageURL    https://github.com/aruncveli/userstyles
@supportURL     https://github.com/aruncveli/userstyles/issues
@updateURL      https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/smhi/smhi.user.css
@license        MIT
@preprocessor   default
@var color fg "Foreground" white
@var color fg5 "Foreground darkened 5" #aaa
@var color bg "Background" black
@var color bg1 "Background lightened 1"	#111
@var color bg2 "Background lightened 2"	#222
==/UserStyle== */
@-moz-document url-prefix("https://www.smhi.se/en/weather/warnings-and-forecasts/weather-forecast") {
  :root {
    color-scheme: dark;
  }

  .smhi-header-logo img,
  .sv-marketplace-sitevision-sub-menu button:after,
  ._windDirection_1cjv5_1._icon_tnsbo_29 > img,
  ._windDirection_1cjv5_1._icon_1jxgj_105 > img,
  ._windDirection_1cjv5_1 > img,
  .highcharts-root image[width="16"] {
    filter: invert(1);
  }

  .sv-theme-standardtema {
    --header-background-color: var(--bg);
    --main-background-color: var(--bg);
    --color-sky-80: var(--fg);
    --color-sky-10: var(--bg1);
    --color-cloud-10: var(--bg);
    --color-cloud-30: var(--bg);
    --color-cloud-100: var(--fg);
    --env-font-color: var(--fg);
    --env-element-font-color: var(--fg);
    --env-focus-outline-color: var(--bg1);
    --env-section-background-color: var(--bg);
  }

  .sv-nestedlistmenu-portlet a,
  .sv-nestedlistmenu-portlet a:hover,
  .sv-marketplace-sitevision-sub-menu a:hover,
  ._eosMenuItem_1r7d2_1,
  a._warningTextContainer_2n9on_1._warningTextContainer_2n9on_1 span {
    color: var(--fg);
  }

  ._autocomplete_1eudd_130 {
    background-color: var(--bg);
  }

  .lbDkoyRdUHp4p3jqVNPO.NiNr7k2boEzl1t49Ahj1 /* tabs on top */,
  .smhi-main-nav .smhi-main-nav__link:hover,
  ._autocomplete_1eudd_130:focus-within,
  ._eosMenuItem_1r7d2_1,
  ._list_1eudd_254 ._favoritesHeader_1eudd_257,
  ._tooltip_spxyq_206 > span {
    background-color: var(--bg1);
  }

  .lbDkoyRdUHp4p3jqVNPO.NiNr7k2boEzl1t49Ahj1:hover,
  ._eosMenuItem_1r7d2_1:hover:not(._noHover_1r7d2_9),
  ._eosMenuItem_1r7d2_1._active_1r7d2_13 {
    background-color: var(--bg2);
  }

  .aurora-root-module_root__QHlfl {
    --colorCloud10: var(--bg1);
    --colorCloud20: var(--bg1);
    --colorCloud30: var(--bg);
    --colorCloud60: var(--fg);
    --colorCloud70: var(--fg);
    --colorCloud100: var(--fg);
    --colorSky10: var(--bg1);
    --colorSky20: var(--bg1);
    --colorSky30: var(--bg);
    --colorSky40: var(--bg);
    --colorSky50: var(--bg);
    --colorHorizon10: var(--bg);
    --colorZenith: var(--bg);
    --hoverFillColor: var(--bg1);
    --selectedHoverFillColor: var(--bg1);
    --activeFillColor: var(--bg1);
    --selectedActiveFillColor: var(--bg1);
    --colorNadir: var(--fg);
    --borderColor: var(--bg);
    --borderColorSecondary: var(--bg);
  }

  .highcharts-background {
    fill: var(--bg);
  }

  ._forecastContainer_4olyg_1 ._markerContent_4olyg_18 ._weatherSymbol_4olyg_45,
  ._forecastContainer_4olyg_1
    ._markerContent_4olyg_18
    ._weatherSymbol_4olyg_45._selected_4olyg_71 {
    background-color: var(--fg);
    border-color: var(--fg);
  }

  @media (hover: hover) {
    ._forecastContainer_4olyg_1
      ._markerContent_4olyg_18
      ._weatherSymbol_4olyg_45:hover {
      background-color: var(--fg);
      border-color: var(--fg);
    }
  }

  ._markerLabel_4olyg_30 {
    color: var(--bg);
    text-shadow: none;
  }

  ._tooltip_spxyq_206 span,
  ._tooltip_y73h5_221 span {
    color: var(--fg) !important;
  }

  path.highcharts-grid-line {
    stroke: var(--bg);
  }
}