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

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

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

  // off-white
  &.button--off-white,
  %button-plain--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;
      }
    }
  }

  //white
  &.button--white,
  %button-plain--white {
    color: $color-brand--white;

    &:hover {
      background: $color-brand--white;
      border-color: transparent;
      color: $color-brand--two;

      .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--grey;
        color: $color-brand--two;
      }
    }
  }

  // dark blue
  &.button--dark-blue,
  %button-plain--dark-blue {
    color: $color-brand--two;

    &:hover {
      background: $color-brand--two;
      border-color: transparent;
      color: $color-brand--white;

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

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

  // dark blue 180
  &.button--dark-blue-180,
  %button-plain--dark-blue-180 {
    color: $color--two-180;

    &:hover {
      background: $color--two-180;
      border-color: transparent;
      color: $color-brand--white;

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

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

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

/** This is needed because the CSS is set up in a way that the CSS of button--plain
(which is actually no modifier but a variant so in BEM should be a block) overwrites the colour classes
This means if you add button--off-white, it never becomes off white, but inherits the color of button-plain.
So I duplicated this here, to make it work again.
**/

// dark blue
.button.button--plain.button--dark-blue,
a.button.button--plain.button--dark-blue {
  // chained to add specificity
  // using mixin to be able to extend in media queries
  @extend %button-plain--dark-blue;
}

// dark blue 180
.button.button--plain.button--dark-blue-180,
a.button.button--plain.button--dark-blue-180 {
  // chained to add specificity
  // using mixin to be able to extend in media queries
  @extend %button-plain--dark-blue-180;
}
// off-white
.button.button--plain.button--off-white,
a.button.button--plain.button--off-white {
  // chained to add specificity
  // using mixin to be able to extend in media queries
  @extend %button-plain--off-white;
}

// white
.button.button--plain.button--white,
a.button.button--plain.button--white {
  // chained to add specificity
  // using mixin to be able to extend in media queries
  @extend %button-plain--white;
}
