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

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

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

  &--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--one;
    }

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

    &-brand--turquoise svg {
      fill: $color-brand--three;
    }

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

    &-brand--red svg {
      fill: $color-brand--five;
    }

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

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

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

    &--dark-blue-60 svg {
      fill: $color--two-60;
    }
  }

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

// default color mappings
.bg-brand {
  // idle
  &--blue,
  &--dark-blue {
    .icon {
      color: $color-brand--four;
    }
  }

  // hover
  &--dark-blue {
    .icon--hover:hover {
      color: $color-brand--one;
    }
  }

  &--blue,
  &--turquoise,
  &--red {
    .icon--hover:hover {
      color: $color-brand--two;
    }
  }

  &--yellow {
    .icon--hover:hover {
      color: $color-brand--four;
    }
  }
}
