.button--preloader {
  &.button {
    line-height: $baseline * 6;

    span,
    &::before,
    &::after {
      animation: zoom--second-dot 1s infinite ease-in-out;
      border-radius: 50%;
      background: $color-brand--one;
      display: inline-block;
      height: $baseline * 1.8;
      width: 18px;
    }

    &::before {
      animation-name: zoom--first-dot;
      content: '';
    }
    &::after {
      animation-name: zoom--third-dot;
      content: '';
    }

    &:hover span,
    &:hover::before,
    &:hover::after,
    &:focus span,
    &:focus::before,
    &:focus::after {
      background: $color-brand--four;
    }
  }

  &.button--off-white {
    span,
    &::before,
    &::after {
      background: $color-brand--four;
    }

    &:hover span,
    &:hover::before,
    &:hover::after,
    &:focus span,
    &:focus::before,
    &:focus::after {
      background: $color-brand--one;
    }
  }

  &.button--white {
    span,
    &::before,
    &::after {
      background: $color-brand--white;
    }

    &:hover span,
    &:hover::before,
    &:hover::after,
    &:focus span,
    &:focus::before,
    &:focus::after {
      background: $color-brand--two;
    }
  }

  &.button--dark-blue {
    span,
    &::before,
    &::after {
      background: $color-brand--two;
    }

    &:hover span,
    &:hover::before,
    &:hover::after,
    &:focus span,
    &:focus::before,
    &:focus::after {
      background: $color-brand--four;
    }
  }

  &.button--filled {
    line-height: $baseline * 6.4;

    span,
    &::before,
    &::after {
      background: $color-brand--four;
    }
    &.button--off-white {
      span,
      &::before,
      &::after {
        background: $color-brand--two;
      }
    }
    &.button--white {
      span,
      &::before,
      &::after {
        background: $color-brand--two;
      }
    }
  }

  &.button--plain:hover {
    span,
    &::before,
    &::after {
      background: $color-brand--white;
    }

    &.button--off-white {
      span,
      &::before,
      &::after {
        background: $color-brand--four;
      }
    }
    &.button--white {
      span,
      &::before,
      &::after {
        background: $color-brand--two;
      }
    }
    &.button--dark-blue {
      span,
      &::before,
      &::after {
        background: $color-brand--white;
      }
    }
  }
}