@use 'sass:meta';
@use '../../functions/is-alias' as *;

/// Generates the base visual styles for a button element.
///
/// @param {Color} $background - The background color of the button.
/// @param {Color} $color - The button text color.
/// @param {String} $border - The border value for the buttton.
/// @param {Number} $radius - The border radius value.
/// @param {Number} $margin - The button's margin value.
/// @param {Number} $padding - The button's padding value.
/// @param {List} $font-family - The button's font-family stack.
/// @param {Number} $font-size [1.25rem] - The button's font-size.
/// @param {Number | String} $font-weight [400] - The button's font-weight.
/// @param {String} $transition [null] - The button's transition value.
/// By default, a null value here will have the mixin search for a global
/// $button-transition variable as is found in the variables/_misc.scss file in
/// this library. If no global variable is found, it will apply the following
/// default: `background-color 0.2s ease-out, color 0.2s ease-out`.
///
/// @group Utilities
@mixin button-base(
  $background,
  $color,
  $border,
  $radius,
  $margin,
  $padding,
  $font-family,
  $font-size: 1.25rem,
  $font-weight: 700,
  $transition: null
) {
  @if not $transition {
    $transition: if(
      meta.variable-exists('button-transition') or
      meta.global-variable-exists('button-transition'),
      $button-transition,
      (background-color 0.2s ease-out, color 0.2s ease-out)
    );
  } @else if not $transition or is-alias('none', $transition) {
    $transition: null;
  }

  display: inline-block;
  vertical-align: middle;
  padding: $padding;
  border: $border;
  border-radius: $radius;
  margin: $margin;
  background: $background;
  color: $color;
  text-align: center;
  cursor: pointer;

  @if $font-family and $font-size {
    @if $font-weight {
      font: $font-weight $font-size $font-family;
    } @else {
      font: $font-size $font-family;
    }
  } @else {
    @if $font-family and
      $font-size and
      $font-weight and
      $font-weight and
      $font-weight !=
      400 and
      $font-weight !=
      normal
    {
      font: $font-weight $font-size $font-family;
    } @else if
      $font-family and
      $font-size and
      (
        not
          $font-weight or
          $font-weight ==
          400 or
          $font-weight ==
          normal
      )
    {
      font: $font-size $font-family;
    } @else {
      @if $font-family {
        font-family: $font-family;
      }
      @if $font-size {
        font-size: $font-size;
      }
      @if $font-weight and
        $font-weight !=
        400 and
        $font-weight !=
        normal
      {
        font-weight: $font-weight;
      }
    }
  }

  @if $transition {
    transition: $transition;
  }
}

/// Generates the base visual styles for a button element.
///
/// @access public
///
/// @param {Color} $background - The background color of the button.
/// @param {Color} $color - The button text color.
/// @param {String} $border - The border value for the buttton.
/// @param {Number} $radius - The border radius value.
/// @param {Number} $margin - The button's margin value.
/// @param {Number} $padding - The button's padding value.
/// @param {List} $font-family - The button's font-family stack.
/// @param {Number} $font-size [1rem] - The button's font-size.
/// @param {Number | String} $font-weight [400] - The button's font-weight.
/// @param {String} $transition [null] - The button's transition value.
/// By default, a null value here will have the mixin search for a global
/// $button-transition variable as is found in the variables file in this
/// library. If no global variable is found, it will apply the following
/// default: `background-color 0.2s ease-out, color 0.2s ease-out`.
///
/// @group Utilities
///
/// @alias button-base
@mixin btn-base(
  $background,
  $color,
  $border,
  $radius,
  $margin,
  $padding,
  $font-family,
  $font-size: 1rem,
  $font-weight: 400,
  $transition: null
) {
  @include button-base(
    $background,
    $color,
    $border,
    $radius,
    $margin,
    $padding,
    $font-family,
    $font-size,
    $font-weight,
    $transition
  );
}