.tooltip {
  $margin: .25em; //em value is used to make margin adjust to font-size
  $icon: "\f059";

  color: color("foreground");
  text-align: left;

  //Reset text style on button, to make button adapt to style of where it is used
  font-weight: unset;
  text-transform: unset;

  &::after,
  &::before {
    font-family: "font-awesome";
    font-weight: $icon-weight-light
  }

  &::after {
    content: $icon;
    margin-left: $margin;
  }

  &:hover {
    color: color("foreground-hover");
    outline: none;
  }

  &:active {
    color: color("foreground");
    outline: none;
  }

  &:focus-visible {
    outline: $outline-width solid color("utility-focus");
    outline-offset: $outline-offset;
  }  

  &--icon-left,
  &--hide-label {
    margin-left: $margin;
    color: color("foreground-theme");

    &:hover {
      color: color("foreground-theme-hover");
    }

    &:active {
      color: color("foreground-theme");
    }

    &::after {
      content: none;
    }

    &::before {
      content: $icon;
      margin-right: $margin;
    }
  }

  &--hide-label {
    width: 1.1em;
    white-space: nowrap;
    overflow: hidden;
  }

  &--icon-left {
    &--stand-alone {
      margin-left: 0;
    }
  }

  &--default-size {
    @include set-font(0, "single");
    vertical-align: text-top;
  }
}