/**
 * icon
 */

.icon-base() {
  display: inline-block;
  vertical-align: middle;
  align-items: center;
  position: relative;
  font-size: @icon-medium;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: inherit;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  img& {
    top: -.1em;
    width: auto;
    height: @icon-medium;
  }
}

/**
 * icon-xt
 */

.icon-xt {
  .icon-base();
  font-family: @icons-xt-family;
}

[class^='icon-xt-'], [class*=' icon-xt-'] {
  display: inline-block;
  vertical-align: middle;
  align-items: center;
  &:before {
    .icon-xt();
  }
}

/**
 * icon
 */

@icons-theme--family: none;
@icons-theme: none;

.icon-theme {
  & when not (@icons-theme--family = none) {
    .icon-base();
    font-family: @icons-theme--family;
  }
}

[class^='icon-theme-'], [class*=' icon-theme-'] {
  display: inline-block;
  vertical-align: middle;
  align-items: center;
  &:before {
    .icon-theme();
  }
}

/**
 * @generate-icon
 */

// .icon-xt

.icon-xt(@content, @size: @icon-medium, @position: after) {
  & when (@position = before) {
    &:before {
      .icon-xt();
      content: '@{content}';
      font-size: @size;
    }
  }
  & when (@position = after) {
    &:after {
      .icon-xt();
      content: '@{content}';
      font-size: @size;
    }
  }
}

// .icon

.icon(@content, @size: @icon-medium, @position: after) {
  & when (@position = before) {
    &:before {
      .icon-theme();
      content: '@{content}';
      font-size: @size;
    }
  }
  & when (@position = after) {
    &:after {
      .icon-theme();
      content: '@{content}';
      font-size: @size;
    }
  }
}

// generate

& when (@generate-icon) {

  // generate-icons-xt

  .generate-icons-xt();
  .generate-icons-xt(@i: length(@icons-xt)) when (@i > 0) {
    .generate-icons-xt(@i - 1);
    @name: extract(@icons-xt, @i);
    @val: ~"icon-xt-@{name}";
    .icon-xt-@{name} {
      &:before {
        content: @@val;
      }
    }
  }

  // generate-icons

  & when not (@icons-theme--family = none) {

    .generate-icons();
    .generate-icons(@i: length(@icons-theme)) when (@i > 0) {
      .generate-icons(@i - 1);
      @name: extract(@icons-theme, @i);
      @val: ~"icon-theme-@{name}";
      .icon-@{name} {
        &:before {
          content: @@val;
        }
      }
    }

  }

}