@use "sass:math";

.cobalt- {
  &Icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    max-height: 100%;
    max-width: 100%;
    // TO REMOVE IN ORDER TO USE UTILITIES FOR MARGINS
    margin: auto;

    vertical-align: middle;
    line-height: 0;

    fill: currentColor;

    > svg {
      display: inline-block;
      width: 100%;
      max-width: 100%;
      max-height: 100%;
    }
  }

  &Icon--contained {
    @apply c-bg-neutralAlt c-rounded-lg;
    height: 40px;
    width: 40px;
    padding: math.div(40px - 24px, 2);
  }

  &Icon--size16 {
    height: 16px;
    width: 16px;

    &.cobalt-Icon--contained {
      height: 28px;
      width: 28px;

      padding: math.div(28px - 16px, 2);

      @apply c-rounded-md;
    }
  }

  &Icon--size20 {
    height: 20px;
    width: 20px;

    &.cobalt-Icon--contained {
      height: 32px;
      width: 32px;

      padding: math.div(32px - 20px, 2);

      @apply c-rounded-md;
    }
  }

  &Icon--size32 {
    height: 32px;
    width: 32px;

    &.cobalt-Icon--contained {
      height: 52px;
      width: 52px;

      padding: math.div(52px - 32px, 2);

      @apply c-rounded-lg;
    }
  }

  &Icon--loading {
    animation: cobalt-animation__full-rotation 0.75s linear infinite;
  }
}

@mixin icon-color-class($color-name, $value) {
  .cobalt-Icon--color#{$color-name} {
    fill: $value;
  }
}

@mixin generate-icon-color-classes($color-map) {
  @each $color, $value in $color-map {
    $class-prefix: ".cobalt-Icon--color";
    $capitalizedColor: capitalize(to-string($color));
    @if type-of($value) == color {
      @include icon-color-class(#{$capitalizedColor}, $value);
    } @else {
      $sub-map: $value;
      @each $variant, $variant-value in $sub-map {
        @if $variant == "base" {
          @include icon-color-class(#{$capitalizedColor}, $variant-value);
        } @else {
          $capitalizedVariant: capitalize(to-string($variant));

          @include icon-color-class(
            #{$capitalizedColor}#{$capitalizedVariant},
            $variant-value
          );
        }
      }
    }
  }
}

@include generate-icon-color-classes($color-data);

@import "./iconColors.scss";