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

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

// 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;
  }
}
