.button:disabled,
.button--disabled,
a.button--disabled,
.bg-brand--off-white a.button--disabled  {
  &,
  &:hover,
  &:active,
  &:focus {
    background: transparent;
    border-color: $color--grey;
    color: $color--two-50;
    pointer-events: none;
  }

  .icon svg {
      fill: $color--two-50;
  }
}


// disabled filled
.button--disabled-filled:disabled,
.button--disabled-filled,
a.button--disabled-filled,
.bg-brand--off-white a.button--disabled-filled {
  &,
  &:hover,
  &:active,
  &:focus {
    background: $color--grey;
  }
}
