// selector chained to add specificity over default button styling
.button.button--plain,
a.button.button--plain,
.bg-brand--off-white a.button.button--plain {
  border-color: transparent;
  color: $color-brand--one;

  &:hover {
    background: $color-alpha--one-10;
    border-color: transparent;
    color: $color-brand--one;

    .icon svg {
      fill: $color-brand--one;
    }
  }
  // on touch devices hover is similar to ':active' state.
    // outputs regular ':active' state & specific ':hover'
    // state for touch devices
    &{
      @include hover-touch {
        background: $color-alpha--one-30;
      }
    }

  // off-white
  &.button--off-white {
    color: $color-brand--four;

    &:hover {
      background: $color-alpha--four-30;
      border-color: transparent;
      color: $color-brand--four;

      .icon svg {
        fill: $color-brand--four;
      }
    }
    // on touch devices hover is similar to ':active' state.
    // outputs regular ':active' state & specific ':hover'
    // state for touch devices
    &{
      @include hover-touch {
        background: $color-alpha--four-50;
        color: $color-brand--four;
      }
    }
  }
  // dark blue
  &.button--dark-blue {
    color: $color-brand--two;

    &:hover {
      background: $color-alpha--two-10;
      border-color: transparent;
      color: $color--two-80;

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

    // on touch devices hover is similar to ':active' state.
    // outputs regular ':active' state & specific ':hover'
    // state for touch devices
    &{
      @include hover-touch {
        background: $color-alpha--two-30;
        color: $color-brand--two;
      }
    }
  }


  // disabled
  &.button--disabled,
  &:disabled {
    color: $color--grey;
  }
}
