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

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

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

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

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

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

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

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

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

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