@mixin cards-general-background-mapping {
  .bg-variant-brand-tertiary {
    .cards__item {
      background: returnColorCSSVar('white');
    }
    .cards__link {
      color: returnColorCSSVar('brand-primary');
      &:hover {
        color: returnColorCSSVar('brand-primary');
      }
    }
  }

  .cards__item--disabled {
    @include bg-variants(
      $isChained: true,
      $supportedBackgrounds: (
        'white',
        'brand-tertiary'
      )
    ) {
      .cards__link {
        color: variant-property('bodySecondary');
      }
    }
  }

  .cards__item--more {
    @include bg-variants(
      $isChained: true,
      $supportedBackgrounds: (
        'brand-primary'
      )
    ) {
      .button {
        @include button-bg-map;
      }
    }
  }

  // hover state for all cards except 'more' and 'disabled'
  .cards__item:not(.cards__item--more):not(.cards__item--disabled):hover {
    border-color: returnColorCSSVar('brand-primary');
  }

  // active state (set by JS) for all cards except 'more', 'disabled' and 'backside active'
  .cards__item--active:not(.cards__item--more):not(.cards__item--backside-active):not(.cards__item--disabled) {
    &,
    &:hover,
    &:focus {
      background-color: returnColorCSSVar('brand-primary-tint-7');
      border-color: returnColorCSSVar('brand-primary');
    }
  }

  // icons front of card

  .cards__item {
    @include bg-variants(
      $isChained: true,
      $supportedBackgrounds: (
        'brand-tertiary'
      )
    ) {
      .cards__meta-item .icon,
      .cards__time-info,
      .cards__info-button .icon {
        @include color-dark-shade-alternative;
      }
      .cards__link {
        color: variant-property('linkIdle');
      }
    }
  }

  .cards__item {
    @include bg-variants(
      $isChained: true,
      $supportedBackgrounds: (
        'white'
      )
    ) {
      .cards__meta-item .icon,
      .cards__time-info,
      .cards__info-button .icon {
        @include color-dark-shade-main;
      }
    }
  }

  // info icon
  .cards__info-wrapper:hover svg {
    color: returnColorCSSVar('brand-secondary');
  }

  // heart icon
  .icon__toggler {
    .icon + .icon {
      color: returnColorCSSVar('brand-quinary');
    }

    &:hover svg {
      fill: returnColorCSSVar('brand-quinary');
    }
  }

  // back of card

  .cards__item.cards__item--backside-active {
    background: returnColorCSSVar('brand-primary');

    .cards__backside-description,
    .cards__backside-footer--job-link {
      color: returnColorCSSVar('white');
    }

    .cards__backside-description::before {
      background: linear-gradient(
        to bottom,
        returnColorCSSVar('brand-primary-alpha-10'),
        80%,
        returnColorCSSVar('brand-primary')
      );
    }

    .cards__backside-footer .icon {
      color: inherit;
    }

    .cards__backside-footer--close-backside {
      color: returnColorCSSVar('white-alpha-50');

      &:hover {
        color: returnColorCSSVar('white');
      }
    }
  }

  // ! deprecation warning old bg mapping.
  .bg-brand--off-white .cards__item {
    background: $color-brand--four;
  }

  .cards__item {
    &.cards__item--backside-active {
      background: $color-brand--one;
    }

    &.cards__item--more {
      background: $color-brand--one;
    }
  }

  .cards__item--animate {
    .cards__backside-card,
    & {
      animation: blueToWhite 300ms;
    }
  }
  .cards__info-button .icon,
  .cards .icon__toggler .icon,
  .cards__meta-item.cards__meta-item .icon {
    color: $color--two-60;
  }

  .icon__toggler .icon + .icon {
    color: $color-brand--five;
  }

  //keyframes animation
  @keyframes blueToOffWhite {
    from {
      background-color: returnColorCSSVar('brand-primary');
    }
    to {
      background-color: returnColorCSSVar('brand-tertiary');
    }
  }

  @keyframes blueToWhite {
    from {
      background-color: returnColorCSSVar('brand-primary');
    }
    to {
      background-color: returnColorCSSVar('white');
    }
  }
}