// @button--{{color}}

// black ghost button
@mixin button--dark {
  border-color: $color-brand--two;
  color: $color-brand--two;

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

  &:hover {
    background: $color-brand--two;
    border-color: $color-brand--two;
    color: $color-brand--white;

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

  @include hover-touch {
    background: $color-brand--black;
    border-color: $color-brand--black;
    color: $color-brand--white;
  }
}

// white ghost button
@mixin button--light {
  border-color: $color-brand--white;
  color: $color-brand--white;
  background: transparent;

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

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

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

  @include hover-touch {
    background: $color-brand--five;
    border-color: $color-brand--five;
    color: $color-brand--one;

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

// orange ghost button
@mixin button--brand-one {
  border-color: $color-brand--one;
  color: $color-brand--one;

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

  &:hover {
    background: $color-brand--two;
    border-color: $color-brand--two;
    color: $color-brand--white;

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

  @include hover-touch {
    background: $color-brand--one;
    border-color: $color-brand--one;
    color: $color-brand--white;
  }
}

// black filled button
@mixin button--dark-filled {
  background: $color-brand--two;
  color: $color-brand--white;

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

  &:hover {
    background: $color--black-80;
    color: $color-brand--white;
  }

  @include hover-touch {
    background: $color-brand--black;
  }
}

// white filled button
@mixin button--light-filled {
  background: $color-brand--white;
  color: $color-brand--one;

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

  &:hover {
    background: $color-brand--five;
    color: $color-brand--one;

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

  @include hover-touch {
    background: $color-brand--four;
    border-color: $color-brand--four;
    color: $color-brand--one;
  }
}