@use 'sass:string';
@import './constants.scss';

@for $i from 0 through 72 {
  $angle: 5 * $i;
  $rotationDegree: string.unquote($angle + 'deg');
  .transform-rotate-#{$angle} {
    transform: rotate($rotationDegree);
  }
}

div.symbol-image {
  display: table;
}

.light-theme {
  .level-0 {
    background-color: $light-green;
  }

  .level-1 {
    background-color: $light-green;
  }

  .level-2 {
    background-color: $light-yellow;
  }

  .level-3 {
    background-color: $light-orange;
  }

  .level-4 {
    background-color: $light-red;
  }
}

.dark-theme {
  .level-0 {
    background-color: $dark-green;
  }

  .level-1 {
    background-color: $dark-green;
  }

  .level-2 {
    background-color: $dark-yellow;
  }

  .level-3 {
    background-color: $dark-orange;
  }

  .level-4 {
    background-color: $dark-red;
  }
}

.light-gray-theme {
  .level-0 {
    background-color: $light-gray-green;
  }

  .level-1 {
    background-color: $light-gray-green;
  }

  .level-2 {
    background-color: $light-gray-yellow;
  }

  .level-3 {
    background-color: $light-gray-orange;
  }

  .level-4 {
    background-color: $light-gray-red;
  }
}

.dark-gray-theme {
  .level-0 {
    background-color: $dark-gray-green;
  }

  .level-1 {
    background-color: $dark-gray-green;
  }

  .level-2 {
    background-color: $dark-gray-yellow;
  }

  .level-3 {
    background-color: $dark-gray-orange;
  }

  .level-4 {
    background-color: $dark-gray-red;
  }
}

@media (forced-colors: active) {
  .level-0,
  .level-1,
  .level-2,
  .level-3,
  .level-4 {
    forced-color-adjust: none;
  }
}

.thunder-storm {
  background-image: url($warning-image-path + 'thunder-storm' + $image-extension);
}

.wind {
  background-image: url($warning-image-path + 'wind' + $image-extension);
}

.rain {
  background-image: url($warning-image-path + 'rain' + $image-extension);
}

.traffic-weather {
  background-image: url($warning-image-path + 'traffic-weather' + $image-extension);
}

.pedestrian-safety {
  background-image: url($warning-image-path + 'pedestrian-safety' + $image-extension);
}

.forest-fire-weather {
  background-image: url($warning-image-path + 'forest-fire-weather' + $image-extension);
}

.grass-fire-weather {
  background-image: url($warning-image-path + 'grass-fire-weather' + $image-extension);
}

.hot-weather {
  background-image: url($warning-image-path + 'hot-weather' + $image-extension);
}

.cold-weather {
  background-image: url($warning-image-path + 'cold-weather' + $image-extension);
}

.uv-note {
  background-image: url($warning-image-path + 'uv-note' + $image-extension);
}

.flood-level {
  background-image: url($warning-image-path + 'flood-level-3' + $image-extension);
}

.sea-wind {
  background-image: url($warning-image-path + 'sea-wind' + $image-extension);
}

.sea-thunder-storm {
  background-image: url($warning-image-path + 'sea-thunder-storm' + $image-extension);
}

.sea-water-height-high-water {
  background-image: url($warning-image-path + 'sea-water-height-high-water' + $image-extension);
}

.sea-water-height-shallow-water {
  background-image: url($warning-image-path + 'sea-water-height-shallow-water' + $image-extension);
}

.sea-wave-height {
  background-image: url($warning-image-path + 'sea-wave-height' + $image-extension);
}

.sea-icing {
  background-image: url($warning-image-path + 'sea-icing' + $image-extension);
}

.several {
  background-image: url($warning-image-path + 'several' + $image-extension);
}

span.symbol-text {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  font-family: $symbol-font-family !important;
  color: #ffffff;
  text-anchor: middle;
  font-weight: 700;
}

@media (width < 576px) {
  .symbol-text {
    display: none;
  }
}