@mixin button-bg-map {
  border-color: variant-property('ghostBorderIdle');
  color: variant-property('ghostTextIdle');

  .icon svg {
    fill: variant-property('ghostTextIdle');
  }

  &:hover,
  &:focus {
    background-color: variant-property('ghostBackgroundHover');
    color: variant-property('ghostTextHover');

    .icon svg {
      fill: variant-property('ghostTextHover');
    }
  }

  &:active {
    background-color: variant-property('ghostBackgroundPressed');
    color: variant-property('ghostTextPressed');
    border-color: variant-property('ghostBackgroundPressed');

    .icon svg {
      fill: variant-property('ghostTextPressed');
    }
  }
}