//
// Icons
//

.rf-icon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: $font-icon-f5;
  font-size: 1em;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


//
// BASIC
//

// the letter x

.rf-icon--no:after {
  color: $red;
  content: "\f00d";
  font-family: $font-icon-f5;
}

// Green check mark

.rf-icon--ok:after {
  content: "\f00c";
  color: $green;
  font-family: $font-icon-f5;
}
// 6 dots, 2 across

.rf-icon--grip:after {
  color: $stormy;
  content: "\f142 \202F \f142";
  cursor: -webkit-grab;
  font-family: $font-icon-f5;

  &:active {
    cursor: -webkit-grabbing;
  }
}

.rf-icon--refresh:after {
  content: "\f021";
  font-family: $font-icon-f5;
}

.rf-icon--rollback{
  transform: scale(-1, 1);

  &:after {
    color: $red;
    content: "\f01e";
    font-family: $font-icon-f5;
  }
}

.rf-icon--pencil:after {
  content: "\270f";
  font-family: $font-icon-g;
}

.rf-icon--eye-open:after {
  content: "\f06e";
  font-family: $font-icon-f5;
}

.rf-icon--eye-closed:after {
  content: "\f070";
  font-family: $font-icon-f5;
}

.rf-icon--download:after {
  content: "\f019";
  font-family: $font-icon-f5;
}

.rf-icon--upload:after {
  content: "\f093";
  font-family: $font-icon-f5;
}

.rf-icon--trash:after {
  content: "\f2ed";
  font-family: $font-icon-f5;
}

.rf-icon--dashboard:after {
  content: "\f3fd";
  font-family: $font-icon-f5;
}

.rf-icon--repeat:after {
  content: "\f2f9";
  font-family: $font-icon-f5;
}

.rf-icon--question:after {
  color: $blue-bright;
  content: "\f059";
  font-family: $font-icon-f5;
}

.rf-icon--github:after {
  font-weight: 900;
  content: "\f09b";
  font-family: $font-icon-f5-b;
}

.rf-icon--caret--right:after {
  content: "\f0da";
  font-family: $font-icon-f5;
}

.rf-icon--caret--left:after {
  content: "\f0d9";
  font-family: $font-icon-f5;
}

.rf-icon--caret--up:after {
  content: "\f0d8";
  font-family: $font-icon-f5;
}

.rf-icon--caret--down:after {
  content: "\f0d7";
  font-family: $font-icon-f5;
}

.rf-icon--external:after {
  content: "\f360";
  font-family: $font-icon-f5;
}

.rf-icon--minus:after {
  content: "\f068";
  font-family: $font-icon-f5;
}

.rf-icon--plus:after {
  content: "\f067";
  font-family: $font-icon-f5;
}


//
// MODAL
//

// i with a circle

.rf-icon--info:after,
%rf-icon--info:after {
  color: $blue-bright;
  content: "\f05a";
  font-family: $font-icon-f5;
}

// ! with a triangle

.rf-icon--warning:after,
%rf-icon--warning:after {
  color: $gold;
  content: "\f071";
  font-family: $font-icon-f5;
}

// ! with a circle

.rf-icon--error:after,
%rf-icon--error:after {
  color: $red;
  content: "\f06a";
  font-family: $font-icon-f5;
}


//
// STEP STATUSES
// In use on OrCA at the moment
//

// Circle with x
// Not executed

.rf-icon--failure:after {
  color: $red;
  content: "\f057";
  font-family: $font-icon-f5;
}

// Circle with x
// Not executed

.rf-icon--success:after {
  color: $green;
  content: "\f058";
  font-family: $font-icon-f5;
}

// Circle with x
// Not executed

.rf-icon--pending:after {
  color: $stormy;
  content: "\f057";
  font-family: $font-icon-f5;
}

// Blue circle
// Step you're currently on

.rf-icon--ongoing:after {
  color: $blue-bright;
  content: "\f111";
  font-family: $font-icon-f5-r;
}

// Gray dash
// Unneeded step

.rf-icon--irrelevant:after {
  color: $stormy;
  content: "\f068";
  font-family: $font-icon-f5;
}


//
// LOADERS
// Must define background color
//

.rf-icon--loading {
  background-image: url(../images/loader.svg);
  background-size: 100% 100%;
  height: 30px;
  width: 30px;

  &.rf-icon--xlarge {
    height: 50px;
    width: 50px;
  }

  &.rf-icon--large {
    height: 38px;
    width: 38px;
  }

  &.rf-icon--small {
    height: 20px;
    width: 20px;
  }

  &.rf-icon--xsmall {
    height: 14px;
    width: 14px;
  }
}


//
// ICON HELPERS
//

.rf-icon--onleft {
  margin-right: 6px;
}

.rf-icon--onright {
  margin-left: 6px;
}


//
// ICON SIZES
//

.rf-icon--xlarge,
%rf-icon--xlarge {
  font-size: 3.8em;
}

.rf-icon--large,
%rf-icon--large {
  font-size: 2em;
}

.rf-icon--small,
%rf-icon--small {
  font-size: .8em;
}

.rf-icon--xsmall,
%rf-icon--xsmall {
  font-size: .6em;
}