/*------------------------------------*\
    #Weather
\*------------------------------------*/

@font-face {
  font-family: 'MeteoconsRegular';
  src: url('@{brand-asset-path-fonts}meteocons-webfont.eot');
  src: url('@{brand-asset-path-fonts}meteocons-webfont.eot?#iefix') format('embedded-opentype'),
       url('@{brand-asset-path-fonts}meteocons-webfont.woff') format('woff'),
       url('@{brand-asset-path-fonts}meteocons-webfont.ttf') format('truetype'),
       url('@{brand-asset-path-fonts}meteocons-webfont.svg#MeteoconsRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.component-weather {
  width:auto;
  text-align:center;
  width:100px;
  div {
    &.cloudy {.weather-variant(N);}
    &.fog {.weather-variant(M);}
    &.hail {.weather-variant(X);}
    &.heavy-rain {.weather-variant(R);}
    &.heavy-snow {.weather-variant(W);}
    &.light-rain {.weather-variant(Q);}
    &.light-snow {.weather-variant(U);}
    &.night-clear {.weather-variant(C);}
    &.night-partly-cloudy {.weather-variant(I);}
    &.partly-cloudy {.weather-variant(H);}
    &.storm {.weather-variant(Z);}
    &.sunny {.weather-variant(B);}
    &.windy {.weather-variant(F);}
  }
  abbr {
    border-bottom:0;
  }

  // Hide the screenreader icon description
  div:first-child > span {
    .sr-only;
  }
}

.weather-variant(@weather) {
  padding-bottom:@padding-small-vertical;
  &:before {
    font-family: 'MeteoconsRegular';
    content: "@{weather}";
    font-size: 3.5em;
    visibility: visible;
  }
}