@use 'colors' as *;
@use 'icons' as *;

$btn-config: (
  'xs': (
    min-width: 24px,
    min-height: 24px,
    padding: 0 4px,
    font-size: 10px,
    line-height: 10px,
    border-radius: 3px,
  ),
  'sm': (
    min-width: 32px,
    min-height: 32px,
    padding: 0 6px,
    font-size: 12px,
    line-height: 16px,
    border-radius: 3px,
  ),
  'md': (
    min-width: 36px,
    min-height: 36px,
    padding: 0 8px,
    font-size: 14px,
    line-height: 18px,
    border-radius: 3px,
  ),
  'lg': (
    min-width: 40px,
    min-height: 40px,
    padding: 0 12px,
    font-size: 14px,
    line-height: 20px,
    border-radius: 4px,
  ),
  'xl': (
    min-width: 48px,
    min-height: 48px,
    padding: 0 16px,
    font-size: 14px,
    line-height: 22px,
    border-radius: 6px,
  ),
);
$btn-font-color: white;
$btn-bg: 500;
$btn-border: 200;
$btn-hover-bg: 600;
$btn-active-bg: 700;

// #### Generate Size Classes
.btn {
  // border-color: var(--button-border-color);
  // background-color: var(--button-background-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  @each $size, $value in $btn-config {
    &-#{$size} {
      @extend %icon-#{$size};
      @each $prop-name, $prop-value in $value {
        --button-#{$size}-#{$prop-name}: #{$prop-value};
        #{$prop-name}: var(--button-#{$size}-#{$prop-name});
      }
    }
  }
}

// #### Generate Color Classes

@each $name, $item in $theme {
  $name: '#{$name}';

  .btn-#{$name} {
    $light: if(
      sass($name==light): var(--#{secondary}-#{600}) ; else: var(--button-font-color),
    ); // var(--button-font-color); //

    --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
    --button-border-color: var(--#{$name}-#{500});
    --button-hover-color: var(--button-hover-font-color);
    --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
    --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
    --button-active-color: var(--button-active-font-color);
    --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
    --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
    background-color: var(--button-background-color);
    border-color: var(--button-border-color);
    color: #{$light};

    &:disabled {
      &:not(.btn-ghost, .btn-outline) {
        background-color: var(--button-border-color);
        border-color: var(--button-border-color);
      }
    }

    &-outline,
    &-ghost {
      --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
      --button-border-color: var(--#{$name}-#{500});
      --button-hover-color: var(--button-hover-font-color);
      --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
      --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
      --button-active-color: var(--button-active-font-color);
      --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
      --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
      border-color: var(--button-border-color);
      color: var(--button-background-color);

      &:disabled {
        // color: #{$light};
      }

      &:hover {
        background-color: var(--button-hover-background-color);
        border-color: var(--button-hover-background-color);
        color: if(sass($name==light): var(--#{light}-#{900}) ; else: var(--button-font-color)); // var(--button-font-color);
        // background-color: transparent;
        @if ($name==light) {
          background-color: var(--#{light}-#{200});
        }
      }

      &:focus {
        // background-color: transparent;
        // color: var(--light-500);
        @if ($name==light) {
          background-color: var(--#{light}-#{200});
        }
      }

      &:active {
        border-color: var(--button-active-background-color);
        color: var(--button-font-color);
        @if ($name==light) {
          background-color: var(--#{light}-#{300});
        } @else {
          background-color: var(--button-active-background-color);
        }
      }
    }

    &:focus {
      // @extend :focus-visible;
    }

    &-outline {
      background-color: transparent;
      border-style: solid;
      border-width: 1px;
    }

    &-ghost {
      background-color: transparent;
      border-color: transparent !important;
    }
  }

  // @each $key,$value in $item {
  //   .#{$name}-#{$key} {
  //     background-color: #{$value};
  //   }
  // }
}