@use "variables";

weather-icon {
  display: flex;
  width: 3rem;

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