.icon {
  box-sizing: content-box;
  color: $color-brand--black;
  height: $icon-size;
  line-height: 0;
  position: absolute;
  right: 0;
  width: $icon-size;

  &--hover {
    transition: color $transition-duration--fast;

    &:hover {
      color: $color-brand--one;
    }
  }

  &--alternative {
    color: $color-brand--one;

    svg {
      fill: $color-brand--one;
    }

    .bg-brand--dark-grey &,
    .bg-brand--gradient-blue & {
      color: $color-alpha--four-50;

      svg {
        fill:  $color-alpha--four-50;
      }
    }
  }

  &--xs {
    height: $icon-size--xs;
    width: $icon-size--xs;
  }

  &--s {
    height: $icon-size--s;
    width: $icon-size--s;
  }

  &--l {
    height: $icon-size--l;
    width: $icon-size--l;
  }

  &--xl {
    height: $icon-size--xl;
    width: $icon-size--xl;
  }

  &--xxl {
    height: $icon-size--xxl;
    width: $icon-size--xxl;
  }

  &--xxxl {
    height: $icon-size--xxxl;
    width: $icon-size--xxxl;
  }

  &--inline {
    display: inline-block;
    position: relative;
    right: inherit;
  }

  svg {
    fill: currentColor;
    height: 100%;
    width: 100%;
  }
  // svg color fills
  &.fill {
    &-brand--blue svg {
      fill: $color-brand--three;
    }

    &-brand--dark-grey svg {
      fill: $color-brand--two;
    }

    &-brand--orange svg {
      fill: $color-brand--one;
    }

    &-brand--light-grey svg {
      fill: $color-brand--four;
    }

    &-brand--grey svg {
      fill: $color-brand--six;
    }

    &-brand--white svg {
      fill: $color-brand--white;
    }

    &--dark-grey-50 svg {
      fill: $color--two-50;
    }
  }

  &--valid svg {
    fill: $color--positive;
  }
}

// default color mappings
.bg-brand {
  // idle
  &--gradient-orange,
  &--orange,
  &--blue,
  &--gradient-blue,
  &--dark-grey {
    .icon {
      color: $color-brand--white;
    }
  }
}

.bg-brand {
  // hover
  &--gradient-orange,
  &--orange,
  &--blue,
  &--gradient-blue {
    .icon--hover:hover {
      color: $color-brand--two;
    }
  }
  &--dark-grey {
      .icon--hover:hover {
        color: $color-brand--one;
      }
  }
}