@use "sass:map";
@use "system/colors";
@use "system/icon-map";
@use "system/icons";
@use "system/units";

.ods-icon {
  vertical-align: bottom;

  @each $name, $content in icons.$sizes {
    &.ods-icon--size-#{$name} {
      @extend %ods-icon--size-#{$name};
    }

    &.ods-icon--size-#{$name}-breakpoint-medium {
      @extend %ods-icon--size-#{$name}-breakpoint-medium;
    }

    &.ods-icon--size-#{$name}-breakpoint-large {
      @extend %ods-icon--size-#{$name}-breakpoint-large;
    }

    &.ods-icon--size-#{$name}.ods-icon--small {
      @extend %ods-icon--size-#{$name}--small;
    }

    &.ods-icon--size-#{$name}.ods-icon--align-right {
      @extend %ods-icon--size-#{$name}--align-right;
    }

    &.ods-icon--size-#{$name}.ods-icon--align-right.ods-icon--small {
      @extend %ods-icon--size-#{$name}--align-right--small;
    }
  }

  @each $name, $color in colors.$colors {
    &.ods-icon--color-#{$name} {
      color: $color;
    }
  }

  @each $name, $content in icon-map.$icons {
    &--#{$name} {
      font-family: "Oslo Icons", Arial, Helvetica, sans-serif;

      &::before {
        content: "#{$content}";
      }
    }
  }

  &.ods-icon--standalone {
    @extend %ods-icon-standalone;
  }

  &.ods-icon--standalone-breakpoint-medium {
    @extend %ods-icon-standalone-breakpoint-medium;
  }

  &.ods-icon--standalone-breakpoint-large {
    @extend %ods-icon-standalone-breakpoint-large;
  }
}