@mixin social-button($color) {
  background: $color;
  color: color(white);

  &:hover {
    background: darken($color, 10%);
  }

  &.btn-link {
    background: none;
    color: $color;

    &:hover {
      color: darken($color, 10%);
    }
  }
}

@mixin btn-social-outline-variant($color) {
  background: transparent;
  border-color: $color;
  color: $color;

  &:hover {
    background: rgba($color, 0.2);
  }
}

@mixin hover {
  &:hover {
    text-decoration: none;
    @content;
  }
}

// Mixin para o botão inverso
@mixin button-inverse-variant($color, $color-hover: $white) {
  color: $color;
  background-color: rgba($color, 0.2);
  background-image: none;
  border-color: rgba($color, 0);

  // Modificado para usar o mixin hover corretamente
  @include hover {
    color: $color-hover;
    background-color: $color;
    border-color: $color;
  }

  &.focus,
  &:focus {
    box-shadow: 0 0 0 3px rgba($color, .5);
  }

  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }

  &.active,
  &:active,
  .show>&.dropdown-toggle {
    color: $color-hover;
    background-color: $color;
    border-color: $color;
  }
}

@mixin button-inverse-outline-variant($color, $color-hover: $white) {
  color: $color;
  background-image: none;
  background: transparent;
  border-color: rgba($color, 0.2);

  @include hover {
    color: $color;
    background-color: rgba($color, 0.2);
    border-color: rgba($color, 0.2);
  }

  &.focus,
  &:focus {
    box-shadow: 0 0 0 3px rgba($color, .5);
  }

  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }

  &.active,
  &:active,
  .show>&.dropdown-toggle {
    color: $color-hover;
    border-color: $color;
  }
}