@mixin related-job-background-mapping {
  @include viewport--l('inversed') {
    // different colors for meta on small viewports
    .bg-brand {
      &--blue,
      &--red,
      &--turquoise {
        .job-board-item__meta {
          color: $color-alpha--four-50;
        }
      }

      &--dark-blue {
        .job-board-item__meta {
          color: $color--two-60;
        }
      }

      &--yellow {
        .job-board-item__meta {
          color: $color-alpha--two-70;
        }
      }
    }
  }

  // overwrite fill hearts color depending on background
  .bg-brand {
    &--blue,
    &--turquoise,
    &--red {
      .icon__toggler svg {
        fill: $color-alpha--four-50;
      }

      .icon__toggler:hover svg,
      .icon__toggler.icon__toggler--active svg {
        fill: $color-brand--four;
      }

      @media (hover: none) {
        .icon__toggler:not(.icon__toggler--active):hover svg {
          fill: $color-alpha--four-50;
        }
      }
    }

    &--dark-blue,
    &--yellow {
      .icon__toggler svg {
        fill: $color-alpha--four-50;
      }

      .icon__toggler:hover svg,
      .icon__toggler.icon__toggler--active svg {
        fill: $color-brand--five;
      }

      @media (hover: none) {
        .icon__toggler:not(.icon__toggler--active):hover svg {
          fill: $color-alpha--four-50;
        }
      }
    }
  }
}