.font-onyx {

  @shadow: fade(#222, 97%);
  @shadow-glow: #0099FF;

  @icon: #ddd;
  @icon-glow: white;

  * & {

    /**
     * Icon size set per Onyx standard:
     * https://github.com/enyojs/onyx/blob/master/source/Icon.js#L5
     */
    width: 32px;
    height: 32px;
    padding: 3px;
    text-align: center;

    div {
      font-size: 22px;
      color: @icon;

      text-shadow: 3px 3px 5px @shadow,
        0px 0px 3px @shadow;
    }

    .text {
      font-size: 12px;
    }
  }

  &.text-icon {
    width: 50px;
    height: 40px;
  }

  &.icon {

    &.button {

      &:not(.disabled) {
        cursor: pointer;

        &:active {
          div {
            color: white;
            text-shadow: 2px 2px 5px @shadow-glow,
              -2px -2px 5px @shadow-glow,
              2px -2px 5px @shadow-glow,
              -2px 2px 5px @shadow-glow;
          }
        }
      }
    }

  }

}