@use "variables";

weather-icon,
.wi-svg {
  display: flex;
  width: 3rem;

  > svg {
    path {
      fill: gray;
    }
    @each $type, $color in variables.$weather-icons-colors {
      path[id="#{$type}"] {
        fill: $color;
      }
      g[id="#{$type}"] > path {
        fill: $color;
      }
    }
  }

  &.wi-border {
    > svg path {
      stroke: variables.$weather-icons-stroke-color;
      stroke-width: 0.5;
      //paint-order: stroke;
    }
  }

  &.wi-s {
    width: 2.5rem;
  }
  &.wi-l {
    width: 3.5rem;
  }
}