@import "index";

.imagePath(none) {
  background: none;
  _filter: none;
}

.imagePath(@path, @top:center, @left:center, @repeat: no-repeat) when not (@path = none) {
  background: url('@{imageUrl}@{path}') @repeat @left @top;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{imageUrl}@{path}');
  _background: none;
}

.image2xPath(@path, @top:center, @left:center, @repeat: no-repeat) when not (@path = none) {
  background: url('@{image2xUrl}@{path}') @repeat @left @top;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{image2xUrl}@{path}');
  background-size: contain;
  _background: none;
}

.icon(@class, @iconPath, @top:0px, @left:0px) {
  .@{class} {
    & .x-icon,
    &:hover .x-icon,
    &:active .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
    &.native .x-icon,
    &.disabled .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
  }
}

.icon_hover(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
    &:hover .x-icon,
    &:focus .x-icon,
    &.hover .x-icon,
    &:active .x-icon,
    &.active .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -(@left + @distance));
      &.hack {
        .imagePath(@iconPath, -@top, -(@left + @distance));
      }
    }
    &.native .x-icon,
    &.disabled .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
  }
}

.icon_active(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
  .@{class} {
    & .x-icon,
    &:hover .x-icon,
    &:focus .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
    &:active .x-icon,
    &.active .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -(@left + @distance));
      &.hack {
        .imagePath(@iconPath, -@top, -(@left + @distance));
      }
    }
    &.native .x-icon,
    &.disabled .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
  }
}

.icon_hover_active(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
    &:hover .x-icon,
    &:focus .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -(@left+@distance));
      &.hack {
        .imagePath(@iconPath, -@top, -(@left+@distance));
      }
    }

    &:active .x-icon,
    &.active .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -(@left+@distance*2));
      &.hack {
        .imagePath(@iconPath, -@top, -(@left+@distance*2));
      }
    }
    &.native .x-icon,
    &.disabled .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
  }
}

.icon_select(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
    &.active .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -(@left+@distance));
      &.hack {
        .imagePath(@iconPath, -@top, -(@left+@distance));
      }
    }
    &.native .x-icon,
    &.disabled .x-icon {
      display: block;
      .image2xPath(@iconPath, -@top, -@left);
      &.hack {
        .imagePath(@iconPath, -@top, -@left);
      }
    }
  }
}

.icon_custom(@class, @iconPath, @hoverPath:none, @activePath:none, @disablePath:none, @activeDisablePath:none) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath, 0, 0);
      &.hack {
        .imagePath(@iconPath, 0, 0);
      }
    }
    &:hover .x-icon,
    &:focus .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@hoverPath, 0, 0);
      &.hack {
        .imagePath(@hoverPath, 0, 0);
      }
    }

    &:active .x-icon,
    &.active .x-icon {
      display: block;
      .image2xPath(@activePath, 0, 0);
      &.hack {
        .imagePath(@activePath, 0, 0);
      }
    }
    &.native .x-icon,
    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath, 0, 0);
      &.hack {
        .imagePath(@disablePath, 0, 0);
      }
    }
    &.native .x-icon,
    &.disabled.active .x-icon {
      display: block;
      .image2xPath(@activeDisablePath, 0, 0);
      &.hack {
        .imagePath(@activeDisablePath, 0, 0);
      }
    }
  }
}

.icon_custom_hover(@class, @iconPath, @hoverPath:none, @disablePath:none) {
  .@{class} {
    & .x-icon {
      display: block;
      .image2xPath(@iconPath, 0, 0);
      &.hack {
        .imagePath(@iconPath, 0, 0);
      }
    }
    &:hover .x-icon,
    &:focus .x-icon,
    &.hover .x-icon {
      display: block;
      .image2xPath(@hoverPath, 0, 0);
      &.hack {
        .imagePath(@hoverPath, 0, 0);
      }
    }

    &.native .x-icon,
    &.disabled .x-icon {
      display: block;
      .image2xPath(@disablePath, 0, 0);
      &.hack {
        .imagePath(@disablePath, 0, 0);
      }
    }
  }
}

//
@color-bi-font-native: inherit;
//active
@color-bi-font-hover: inherit;
//hover
@color-bi-font-active: #3f8ce8;

.font(@class,@content, @color: @color-bi-font-native) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font {
      *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
    }
    & .b-font:before {
      content: @fc;
      color: @color;
    }
    &.native .b-font:before,
    &.disabled .b-font:before {
      content: @fc;
      color: @color;
    }
  }
}

.font-hover(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font {
      *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
    }
    & .b-font:before {
      content: @fc;
      color: @color-native;
    }
    &:hover .b-font:before,
    &:focus .b-font:before,
    &.hover .b-font:before {
      content: @fc;
      color: @color-hover;
    }
    &.native .b-font:before,
    &.disabled .b-font:before {
      content: @fc;
      color: @color-native;
    }
  }
}

.font-effect(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active, @color-selected: @color-bi-font-active) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font {
      *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
    }
    & .b-font:before {
      content: @fc;
      color: @color-native;
    }
    &:hover .b-font:before,
    &:focus .b-font:before,
    &.hover .b-font:before {
      content: @fc;
      color: @color-hover;
    }
    &.active .b-font:before {
      content: @fc;
      color: @color-selected;
    }
    &:active .b-font:before {
      content: @fc;
      color: @color-active;
    }
    &.native .b-font:before,
    &.disabled .b-font:before {
      content: @fc;
      color: @color-native;
    }
  }
}

.font-hover-active(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active) {
  @fc: "\@{content}";
  .@{class} {
    & .b-font {
      *zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
    }
    & .b-font:before {
      content: @fc;
      color: @color-native;
    }
    &:hover .b-font:before,
    &:focus .b-font:before,
    &.hover .b-font:before {
      content: @fc;
      color: @color-hover;
    }

    &:active .b-font:before,
    &.active .b-font:before {
      content: @fc;
      color: @color-active;
    }
    &.native .b-font:before,
    &.disabled .b-font:before {
      content: @fc;
      color: @color-native;
    }
  }
}