@import "../ui.vars.less";
fa-icon {
  color: @scText;

  &[dark] {
    color: @appDarkGray;
  }

  &[light] {
    color: @appWhite;
  }

  &[black] {
    color: @appBlack;
  }

  &[info] {
    color: @scInfo;
  }

  &[general] {
    color: @scInfo;
  }

  &[action] {
    color: @scAction;
  }

  &[warning] {
    color: @scWarning;
  }

  &[error] {
    color: @scNegative;
  }

  &[negative] {
    color: @scNegative;
  }

  &[success] {
    color: @scPositive;
  }

  &[positive] {
    color: @scPositive;
  }

  &[failed] {
    color: @appRed;
  }

  &[heading] {
    color: orange;
  }

  &[disabled] {
    opacity: 0.4;
  }

  &[item-start] {
    padding-right: 8px;
  }

  &[avatar-star] {
    font-size: 1.75rem;
    line-height: 0px;
    color: @appYellow;
    position: absolute;
    bottom: -2px;
    left: -8px;
  }

  &[clickable] {
    &:hover {
      opacity: 1;
      cursor: pointer;
    }
  }

  &[hover] {
    &:hover {
      color: @scActionHover;
    }
  }
}

fa-layers {
  &[clickable] {
    &:hover {
      fa-icon {
        opacity: 0.5;
      }
      cursor: pointer;
    }
  }
}