@mixin cards-general-background-mapping {

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

  .cards__item--disabled {
    @include bg-variants (
        $isChained: true,
        $supportedBackgrounds: (
          'white',
          'brand-tertiary'
        )
      ) {
      background: variant-property('background');
      a.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 font 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__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-button:hover > .icon {
    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,
        rgba(#f7f5f0, 0),
        80%,
        rgba(#2175d9, 100)
      );
    }

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

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

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

  //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');
    }
  }


  // ! deprecation warning

  .bg-brand--off-white {
    .cards__item {
      background: $color-brand--white;

      &.cards__item--backside-active {
        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;
    }
  }
}
