@use 'sass:string';
@use '../../functions/is-calculation' as *;
@use '../../functions/is-length' as *;
@use '../../functions/is-string' as *;
@use '../../functions/is-time' as *;
@use '../../functions/is-global-value' as *;
@use 'transition-color' as *;

/// Generates a ghost button. Since `background` and `border-color` are both
/// low-performance animation properties, the hover effect for the background
/// and border instead uses the pseudo-element `::after` and an `opacity`
/// transition.
///
/// @link https://www.developerdrive.com/2014/10/how-to-make-a-ghost-button-in-css3/
/// @link https://realcombiz.blogspot.com/2014/12/css-ghost-buttons.html
///
/// @param {Number} $font-size - The font-size value.
/// @param {Color} $font-color - The font's color.
/// @param {String | List} $font-fam - The font family used in the button.
/// @param {Number} $border-width - The border-width for the button.
/// @param {Color} $border-color - The border-color for the button.
/// @param {Number} $padding - The button's padding shorthand property.
/// @param {Number} $transition-duration - The button's transition duration.
/// @param {Color} $text-hover-color - The text color of the button's hover state.
///
/// @group Utilities
/// @require {mixin} transition-color
///
/// @throw Invalid $transition-duration input error.
/// @throw Invalid $border-width input error.
@mixin ghost-button(
  $font-size,
  $font-color,
  $font-weight,
  $font-fam,
  $border-width,
  $border-color,
  $padding,
  $transition-duration,
  $text-hover-color
) {
  @if is-string($border-width) {
    $border-width: string.to-lower-case($border-width);
  }

  @if not is-length($border-width) and
      not is-calculation($border-width) and
      $border-width != thin and
      $border-width != medium and
      $border-width != thick
  {
    @error 'Invalid $border-width input for the [ ghost-button() ] mixin. ' +
        'The $border-width parameter must either be a length, a calculation ' +
        'that resolves to a length, or one of the keywords: thin, medium ' +
        'or thick.';
  }

  @if not is-time($transition-duration) and
      not is-calculation($transition-duration) and
      not is-global-value($transition-duration)
  {
    @error 'Invalid $transition-duration input for the [ ghost-button() ] ' +
        'mixin. This parameter can be a time (in s or ms units), a ' +
        'calculation that resolves to a time value, or a CSS global value.';
  }

  display: inline-block;
  padding: $padding;

  @if $font-fam and $font-size {
    @if $font-weight and $font-weight != 400 and $font-weight != 'normal' {
      font: #{$font-weight} $font-size $font-fam;
    } @else {
      font: $font-size $font-fam;
    }
  } @else {
    @if $font-fam {
      font-family: $font-fam;
    }
    @if $font-size {
      font-size: #{$font-size};
    }
    @if $font-weight and $font-weight != 400 and $font-weight != 'normal' {
      font-weight: #{$font-weight};
    }
  }

  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;

  @include transition-color(
    $font-color,
    $text-hover-color,
    $border-color,
    $border-width,
    rgba(0, 0, 0, 0),
    $border-color,
    #{$transition-duration},
    ease-out
  );
}