.icon {
  @extend .fas !optional;

  margin-right: 0.5em;
}

.icon--badge {
  @extend .fa-id-badge !optional;
}

.icon--cubes {
  @extend .fa-cubes !optional;
}

.icon--download {
  @extend .fa-download !optional;
}

.icon--hand-up {
  @extend .fa-hand-point-up !optional;
}

.icon--link {
  @extend .fa-external-link-alt !optional;
}

.icon--login {
  @extend .fa-sign-in-alt !optional;
}

.icon--logout {
  @extend .fa-sign-out-alt !optional;

  margin: 0;
}

.icon--open {
  @extend .fa-folder-open !optional;
}

.icon--reuse {
  @extend .fa-mobile-alt !optional;
}

.icon--user-plus {
  @extend .fa-user-plus !optional;
}

.icon--book {
  @extend .fa-book !optional;
}

.icon--file {
  @extend .fa-file !optional;
}

.icon--envelope {
  @extend .fa-envelope !optional;
}

.icon--magnifier {
  @extend .fa-search !optional;
}

.icon--times-circle {
  @extend .fa-times-circle !optional;
}

.icon--chart-line {
  @extend .fa-chart-line !optional;
}

.icon--right-arrow {
  @extend .fa-long-arrow-alt-right !optional;
}

.icon--calendar-alt {
  @extend .fa-calendar-alt !optional;
}

.icon--plus {
  @extend .fa-plus !optional;
}

.icon--sync-alt {
  @extend .fa-sync-alt !optional;
}

.icon--table {
  @extend .fa-table !optional;
}

.icon--uptime {
  vertical-align: middle;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.4em;
}

.icon--validation {
  margin-right: .5em;
  font-size: .8em;
}

.icon---animated-heart {
  cursor: pointer;
  transition: color 500ms linear;
  &.active {
    color: red;
  }
}

.fa-heart.producer {
  color: var(--blue);
}

.icon---climate-resilience-bill {
  width: 2.5em;
  height: 2.5em;
  margin-right: 1em;
  vertical-align: middle;
  &.xl {
    width: 5em;
    height: 5em;
    margin-right: 3em;
  }
  &.small {
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em;
  }
}