@include font-awesome;

@each $name, $char in $icons {
  .icon-#{$name} {
    //get backslashes in Sass output: https://stackoverflow.com/questions/21608762/sass-variable-interpolation-with-backslash-in-output
    &::before {
      content:  #{'"\\' + $char + '";'};
    }
  }
}

//force any brand icon to use the font awesome brands font in stead of normal font awesome
[class*="icon-brand-"]::before {
  font-family: "font-awesome-brands" !important;
  font-weight: $font-weight-icon-brands !important;
}

.icon {
  $component-name: ".icon";
  display: inline-block;

  @include icon-style {
    display: inline-block;
    text-align: center;
    line-height: 1;
  }

  //TODO deprecate, use .icon-[icon name] class instead
  &[data-icon]::before {
    content: attr(data-icon);
  }

  &--with-label {
    @include set-font(0, "single");
    display: inline-flex;
    align-items: center;

    #{$component-name}__label {
      flex: 0 1 auto;
      margin-left: spacing($icon-margin);
    }

    &::before {
      align-self: start;
      flex-shrink: 0;
      flex-grow: 0;
      line-height: line-height("single");
    }
  }

  &--heading {
    display: flex;
    align-items: center;

    #{$component-name}__heading {
      flex: 0 1 auto;
    }

    &::before {
      flex-shrink: 0;
      flex-grow: 0;
      align-self: start;
      @include set-colors("theme");

      display: inline-flex;
      align-items: center;
      justify-content: center;
      $size: spacing(-3, $times: 2, $add: line-height("single", $include-calc: false));
      width: $size;
      height: $size;
      border-radius: 50%;
      margin-right: spacing($icon-heading-margin);
    }
  }

  &--circular-background {
    &::before {
      flex: 0 0 auto;
      align-self: flex-start;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: space-around;
      $size: spacing($icon-circular-padding, $times: 2, $add: "#{line-height("single", $include-calc: false)}");
      width: $size;
      height: $size;
      border-radius: 50%;
      @include set-colors("theme");
    }

    &--confirm {
      &::before {
        @include set-colors("utility-confirm");
      }
    }

    &--warning {
      &::before {
        @include set-colors("utility-warning");
      }
    }

    &--attention {
      &::before {
        @include set-colors("utility-attention");
      }
    }

    &--background-secondary {
      &::before {
        @include set-colors("background-secondary");
      }
    }

    &.icon--large {
      &::before {
        $size: spacing($icon-circular-padding-large, $times: 2, $add: "#{line-height("single", $include-calc: false)}");
        width: $size;
        height: $size;
      }
    }

    &.icon--small {
      &::before {
        $size: calc(#{line-height("single", $include-calc: false)} + #{$width-border * 2});
        width: $size;
        height: $size;
      }
    }

    //when icon is used in a table cell make it overflow cell padding to not make the row higher - but only in none compressed tables and not large icon, as this would cause the icon to overflow the table cell borders
    .table:not(.table--dense):not(.table--very-dense) &:not(.icon--large) {
      margin-top: spacing($icon-circular-padding, $times: -1);
      margin-bottom: spacing($icon-circular-padding, $times: -1);
    }
  }

  &--large {
    @include set-font(1, "single");

    #{$component-name}__label {
      margin-left: spacing($icon-margin + 1);
    }
  }

  &--small {
    @include set-font(-1, "single");

    // #{$component-name}__label {
    //   margin-left: spacing($icon-margin + 1);
    // }
  }



  &--margin-right {
    margin-right: spacing($icon-margin);
  }

  &--active {
    &::before {
      font-weight: $font-weight-icon-solid;
    }
  }

  &--fixed-width {
    width: line-height("single");
    text-align: center;
  }
}