@mixin poll-background-mapping {

  .poll__option {
    @include bg-variants() {
      border-color: variant-property('ghostBorderIdle');
      color: variant-property('bodyPrimary');
    }
  }

  .poll__option--selected {
    @include bg-variants() {
      background: variant-property('ghostBackgroundHover');
      color: variant-property('ghostTextHover');
    }
  }

  // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
  .poll__option {
    .bg-brand--turquoise &,
    .bg-brand--yellow & {
      border-color: $color-brand--two;
    }

    .bg-brand--off-white & {
      border-color: $color-brand--two;
      color: $color-brand--two;
    }

    .bg-brand--red & {
      border-color: $color--two-180;
      color: $color--two-180;
    }
  }

  .poll__option--selected {
    .bg-brand--blue & {
      color: $color-brand--one;
    }

    .bg-brand--dark-blue & {
      color: $color-brand--two;
    }

    .bg-brand--turquoise &,
    .bg-brand--yellow &,
    .bg-brand--off-white & {
      background: $color-brand--two;
      color: $color-brand--four;
    }

    .bg-brand--red & {
      background: $color--two-180;
      color: $color-brand--white;
    }
  }

  .modal__close svg {
    color: currentColor;
  }
}