i.icon-default, .icon.icon-default {
  color: $brand-default;
}

i.icon-secondary, .icon.icon-secondary {
  color: darken($brand-secondary, 10%);
}

i.icon-primary, .icon.icon-primary {
  color: $brand-primary;
}

i.icon-info, .icon.icon-info {
  color: $brand-info;
}

i.icon-success, .icon.icon-success {
  color: $brand-success;
}

i.icon-warning, .icon.icon-warning {
  color: $brand-warning;
}

i.icon-danger, .icon.icon-danger {
  color: $brand-danger;
}

i.icon-dark, .icon.icon-dark {
  color: $brand-dark;
}

i.icon-gray-darker, .icon.icon-gray-darker {
  color: $gray-darker;
}

i.icon-gray-dark, .icon.icon-gray-dark {
  color: $gray-dark;
}

i.icon-gray, .icon.icon-gray {
  color: $gray;
}

i.icon-gray-light, .icon.icon-gray-light {
  color: $gray-light;
}

i.icon-gray-lighter, .icon.icon-gray-lighter {
  color: $gray-light;
}


.fill-icon {
  color: white !important;
  &:before {
    background: black;
    position: relative;
    border-radius: $icon-fill-border-radius;
    padding: 1px;
  }

  &.icon-default:before {
    background: $brand-default;
  }
  &.icon-secondary:before {
    background: $brand-secondary;
  }
  &.icon-primary:before {
    background: $brand-primary;
  }
  &.icon-info:before {
    background: $brand-info;
  }
  &.icon-success:before {
    background: $brand-success;
  }
  &.icon-warning:before {
    background: $brand-warning;
  }
  &.icon-danger:before {
    background: $brand-danger;
  }
  &.icon-dark:before {
    background: $brand-dark;
  }

  &.icon-gray-darker:before {
    background: $gray-darker;
  }
  &.icon-gray-dark:before {
    background: $gray-dark;
  }
  &.icon-gray:before {
    background: $gray;
  }
  &.icon-gray-light:before {
    background: $gray-light;
  }
  &.icon-gray-lighter:before {
    background: $gray-lighter;
  }

}

.icon-loading {
  font-family: 'ionicons';
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -webkit-animation:spin .75s linear infinite;
  -moz-animation:spin .75s linear infinite;
  animation:spin .75s linear infinite;

  &:before {
    content: "\e144";
  }
}

.icon-refreshing {
  font-family: 'ionicons';
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -webkit-animation:spin .75s linear infinite;
  -moz-animation:spin .75s linear infinite;
  animation:spin .75s linear infinite;

  &:before {
    content: "\e144";
  }
}