.icon {
  box-sizing: content-box;
  color: returnColorCSSVar('brand-secondary');
  height: $icon-size;
  line-height: 0;
  position: absolute;
  right: 0;
  width: $icon-size;
  transition: color $transition-duration--fast;

  &--hover {
    &:hover {
      color: returnColorCSSVar('brand-primary');
    }
  }

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

  @include bg-variants() {
    color: variant-property('iconInteractivePrimaryIdle');
  }

  &:hover {
    color: returnColorCSSVar('brand-primary');
    @include bg-variants() {
      color: variant-property('iconInteractivePrimaryHover');
    }
  }

  &--static {
    pointer-events: none;
  }
}

.icon--positive {
  color: returnColorCSSVar('ui-positive');

  @include bg-variants() {
    color: variant-property('positive');
  }
}

.icon--negative {
  color: returnColorCSSVar('ui-negative');

  @include bg-variants() {
    color: variant-property('negative');
  }
}

.icon--secondary {
  color: returnColorCSSVar('brand-secondary');
  @include bg-variants() {
    color: variant-property('iconInteractiveSecondaryIdle');
  }

  &:hover {
    color: returnColorCSSVar('brand-secondary');
    @include bg-variants() {
      color: variant-property('iconInteractiveSecondaryHover');
    }
  }
}

.icon--alternative {
  color: returnColorCSSVar('brand-primary');
  &:hover {
    color: returnColorCSSVar('brand-primary-shade-130');
  }

  @include bg-variants() {
    color: variant-property('iconInteractiveAlternative');

    &:hover {
      color: variant-property('iconInteractiveAlternativeHover');
    }
  }
}

.icon--informative {
  color: returnColorCSSVar('brand-secondary-tint-60');
  &:hover {
    color: returnColorCSSVar('brand-secondary-tint-60');
  }
  @include bg-variants() {
    color: variant-property('iconInformativePrimary');

    &:hover {
      color: variant-property('iconInformativePrimary');
    }
  }
}

.icon--bookmark {
  color: returnColorCSSVar('brand-secondary-tint-60');
  &:hover {
    color: returnColorCSSVar('brand-quinary');
  }

  @include bg-variants(
    $supportedBackgrounds: (
      'brand-tertiary',
      'white'
    )
  ) {
    color: variant-property('iconInteractiveAlternativeBookmark');
    &:hover {
      color: variant-property('iconInteractiveAlternativeBookmarkHover');
    }
  }
}

.icon--bookmark-pressed {
  color: returnColorCSSVar('brand-quinary');
  &:hover {
    color: returnColorCSSVar('brand-quinary');
  }
  @include bg-variants(
    $supportedBackgrounds: (
      'brand-tertiary',
      'white'
    )
  ) {
    color: variant-property('iconInteractiveAlternativeBookmarkPressed');
    &:hover {
      color: variant-property('iconInteractiveAlternativeBookmarkHover');
    }
  }
}

.icon--static {
  &:hover {
    pointer-events: none;
  }
}

// ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
.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;
    }
  }
}