@mixin button-filled-bg-map {
  background: variant-property('filledBackgroundIdle');
  border-color: variant-property('filledBackgroundIdle');
  color: variant-property('filledTextIdle');

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

  &:hover,
  &:focus {
    background-color: variant-property('filledBackgroundHover');
    color: variant-property('filledTextHover');
    border-color: variant-property('filledBackgroundHover');

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

  &:active {
    background-color: variant-property('filledBackgroundPressed');
    color: variant-property('filledTextPressed');
    border-color: variant-property('filledBackgroundPressed');

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