@use '../helpers' as *;

@mixin button-style-ghost(
  $background: transparent,
  $background-hover: var(--color-button-background),
  $color: var(--color-button-background),
  $hover: var(--color-white),
  $border: var(--border-width-input-field) solid var(--color-button-background),
  $transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
) {
  background-color: $background;
  border: $border;
  color: $color;
  transition: $transition;

  &.focus,
  &:focus,
  &:hover {
    background-color: $background-hover;
    border-color: $background-hover;
    color: $hover;
  }
}