%button-white {
  background: $color-brand--white;
  color: $color-brand--one;
  border: 2px solid $color-brand--white;

  &:hover {
    background: $color-brand--five;
    color: $color-brand--one;
    border: 2px solid $color-brand--white;

    .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-brand--white;
      border-color: $color-brand--white;
      color: $color-brand--one;
    }
  }

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

.button--filled,
a.button--filled {
  & {
    background: $color-brand--one;
    border: 2px solid $color-brand--one;
    color: $color-brand--white;

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

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

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

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

  // off white
  &.button--white {
    @extend %button-white;
  }
}

// background specific mapping
.bg-brand {
  &--gradient-orange,
  &--orange,
  &--gradient-blue,
  &--blue,
  &--dark-grey,
  &--gradient-purple {
    .button--filled,
    a.button--filled {
      @extend %button-white;
    }
    .modal .button--filled,
    a.modal .button--filled {
      @extend %button-white;
    }
  }
}