.button--filled,
 a.button--filled {

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

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

  // black
  &.button--black {
    background: $color-brand--two;
    color: $color-brand--white;

    &:hover {
      background: $color--black-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-brand--black;
      }
    }
    .icon svg {
      fill: $color-brand--white;
    }
  }

  // off white
  &.button--grey {
    background: $color-brand--white;
    color: $color-brand--one;
    &:hover {
      background: $color-brand--five;
      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-brand--four;
        border-color: $color-brand--four;
        color: $color-brand--one;
      }
    }

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

