.button--filled,
a.button--filled,
.bg-brand--off-white a.button--filled {

  // randstad blue is default
  // placed lower to prevent cascading issues on off-white backgrounds
  &, &.button--blue {
    background: $color-brand--one;
    border: none;
    color: $color-brand--four;

    &:hover {
      background: $color--one-80;
      color: $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--one-130;
        color: $color-brand--four;
      }
    }
    .icon svg {
      fill: $color-brand--four;
    }
  }
  // viewport s / m
  @include viewport--l('inversed') {
    line-height: $baseline * 5.8;
  }

  // dark blue
  &.button--dark-blue {
    background: $color-brand--two;
    color: $color-brand--four;

    &:hover {
      background:$color--two-80;
      color: $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--two-180;
      }
    }
    .icon svg {
      fill: $color-brand--four;
    }
  }

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

    &:hover {
      background: $color-brand--white;
      color: $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--four-110;
      }
    }

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

