// Icons
// -------------------------------

.ion-default {
  color: $brand-default;
}

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

.ion-primary {
  color: $brand-primary;
}

.ion-info {
  color: $brand-info;
}

.ion-success {
  color: $brand-success;
}

.ion-warning {
  color: $brand-warning;
}

.ion-danger {
  color: $brand-danger;
}

.ion-dark {
  color: $brand-dark;
}

.ion-gray-darker {
  color: $gray-darker;
}

.ion-gray-dark {
  color: $gray-dark;
}

.ion-gray {
  color: $gray;
}

.ion-gray-light {
  color: $gray-light;
}

.ion-gray-lighter {
  color: $gray-light;
}


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

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

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

}

.ion-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";
  }
}

.ion-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";
  }
}