$button-styles: ("default", "basic", "outline");
$button-colors: ("primary", "gray", "error", "warning", "success");
$button-sizes: ("sm", "md", "lg", "xl", "2xl");

.pad-button {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 0.5rem;
  font-weight: 600;

  transition: color, background-color, border-color, 200ms ease-in-out;
}

@function button-schema($style, $color) {
  @if not list.index($button-styles, $style) {
    @error "#{$style} is not a valid side. Expected one of #{$button-styles}.";
  }

  @if not list.index($button-colors, $color) {
    @error "#{$color} is not a valid side. Expected one of #{$button-colors}.";
  }

  $result: ();
  @if $style == "default" {
    $result: map-merge(
      $result,
      (
        "text-color": white,
        "background-color": get-color($color, 600),
        "border-color": get-color($color, 600),
        "box-shadow": 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
        "stroke-color": white,
        "hover-background-color": get-color($color, 700),
        "hover-border-color": get-color($color, 700),
        "disabled-text-color": get-color("gray", 400),
        "disabled-background-color": get-color("gray", 100),
        "disabled-border-color": get-color("gray", 200),
        "disabled-stroke-color": get-color("gray", 400),
      )
    );
  }
  @if $style == "outline" {
    $result: map-merge(
      $result,
      (
        "text-color": get-color($color, 700),
        "stroke-color": get-color($color, 800),
        "background-color": get-color($color, 50),
        "border-color": get-color($color, 300),
        "box-shadow": 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
        "hover-background-color": get-color($color, 100),
        "hover-border-color": get-color($color, 300),
        "disabled-text-color": get-color("gray", 400),
        "disabled-stroke-color": get-color("gray", 400),
        "disabled-background-color": white,
        "disabled-border-color": get-color("gray", 200),
      )
    );
  }

  @if $style == "basic" {
    $result: map-merge(
      $result,
      (
        "text-color": get-color($color, 600),
        "stroke-color": get-color($color, 700),
        "background-color": transparent,
        "border-color": transparent,
        "box-shadow": none,
        "hover-background-color": get-color($color, 50),
        "hover-border-color": get-color($color, 50),
        "disabled-text-color": get-color("gray", 400),
        "disabled-stroke-color": get-color("gray", 400),
        "disabled-background-color": transparent,
        "disabled-border-color": transparent,
      )
    );
  }

  @return $result;
}

@function button-size($size) {
  @if not list.index($button-sizes, $size) {
    @error "#{$size} is not a valid side. Expected one of #{$button-sizes}.";
  }

  $result: ();
  @if $size == "sm" {
    $result: map-merge(
      $result,
      (
        "padding-vertical": 0.5rem,
        "padding-horizontal": 0.5rem,
        "font-size": 0.875rem,
        "line-height": 1.25rem,
        "gap": 0.25rem,
      )
    );
  }

  @if $size == "md" {
    $result: map-merge(
      $result,
      (
        "padding-vertical": 0.625rem,
        "padding-horizontal": 0.875rem,
        "font-size": 0.875rem,
        "line-height": 1.25rem,
        "gap": 0.25rem,
      )
    );
  }

  @if $size == "lg" {
    $result: map-merge(
      $result,
      (
        "padding-vertical": 0.625rem,
        "padding-horizontal": 1rem,
        "font-size": 1rem,
        "line-height": 1.5rem,
        "gap": 0.375rem,
      )
    );
  }

  @if $size == "xl" {
    $result: map-merge(
      $result,
      (
        "padding-vertical": 0.75rem,
        "padding-horizontal": 1.125rem,
        "font-size": 1rem,
        "line-height": 1.5rem,
        "gap": 0.375rem,
      )
    );
  }

  @if $size == "2xl" {
    $result: map-merge(
      $result,
      (
        "padding-vertical": 1rem,
        "padding-horizontal": 1.375rem,
        "font-size": 1.125rem,
        "line-height": 1.75rem,
        "gap": 0.625rem,
      )
    );
  }

  @return $result;
}

@function button-icon-size($size) {
  @if not list.index($button-sizes, $size) {
    @error "#{$size} is not a valid side. Expected one of #{$button-sizes}.";
  }

  $result: ();
  @if $size == "sm" {
    $result: map-merge(
      $result,
      (
        "padding": 0.5rem,
        "line-height": 1.25rem,
      )
    );
  }

  @if $size == "md" {
    $result: map-merge(
      $result,
      (
        "padding": 0.625rem,
        "line-height": 1.25rem,
      )
    );
  }

  @if $size == "lg" {
    $result: map-merge(
      $result,
      (
        "padding": 0.75rem,
        "line-height": 1.25rem,
      )
    );
  }

  @if $size == "xl" {
    $result: map-merge(
      $result,
      (
        "padding": 0.875rem,
        "line-height": 1.25rem,
      )
    );
  }

  @if $size == "2xl" {
    $result: map-merge(
      $result,
      (
        "padding": 1rem,
        "line-height": 1.5rem,
      )
    );
  }

  @return $result;
}