.button--filled {
  // dark blue
  &.button--dark-blue {
    background: $color-brand--two;
    color: $color-brand--white;
    border: 2px solid $color-brand--two;

    &:hover,
    &:focus {
      background: $color--two-80;
      color: $color-brand--white;
      border: 2px solid $color--two-80;
    }
    // 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;
      border: 2px solid $color--two-180;
    }

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

  // off white
  &.button--off-white {
    background: $color-brand--four;
    color: $color-brand--two;
    border: 2px solid $color-brand--four;

    &:hover,
    &:focus {
      background: $color-brand--white;
      color: $color-brand--two;
      border: 2px solid $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--four-110;
      border: 2px solid $color--four-110;
    }

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

  // dark blue 180
  &.button--dark-blue-180 {
    //chained to add specificity
    background: $color--two-180;
    color: $color-brand--white;

    &:hover,
    &:focus {
      background: $color--two-80;
      border-color: $color--two-80;
      color: $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;
    }

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

  // randstad blue is default
  // all modal buttons are blue
  // placed lower to prevent cascading issues on off-white backgrounds

  // TODO Remove all extra classes from other components here, it should be clean
  &,
  &.button--blue,
  .modal .bg-brand--off-white &,
  a.modal .bg-brand--off-white &,
  .popover.bg-brand--off-white & {
    background: $color-brand--one;
    border: 2px solid $color-brand--one;
    color: $color-brand--white;

    &:hover {
      background: $color--one-80;
      color: $color-brand--white;
      border: 2px solid $color--one-80;
    }
    // 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--white;
      border: 2px solid $color--one-130;
    }

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

.button--filled {
  @include bg-variants{
    @include button-filled-bg-map;
  }
}