/**
 * 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;
  }

}