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

  .icon svg {
    fill: $color-brand--six;
  }
}

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