@use 'sass:map';

@use '../mixins/var' as *;
@use '../mixins/config' as *;
@use '../mixins/function' as *;
@use '../common/var' as *;

@mixin button-variant(
  $color,
  $bg,
  $hover-color,
  $hover-bg,
  $active-color,
  $active-bg
) {
  color: $color;
  background-color: $bg;

  &:hover,
  &:focus {
    &:not(.is-disabled) {
      color: $hover-color;
      background-color: $hover-bg;
    }
  }

  &:active {
    &:not(.is-disabled) {
      color: $active-color;
      background-color: $active-bg;
    }
  }

  [class*='#{$namespace}-icon'] {
    &.is-loading {
      color: $color;
    }
  }
}

@mixin button-size(
  $padding-x,
  $padding-y,
  $font-size,
  $line-height,
  $icon-size,
  $border-radius,
  $spacing-gap
) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
  height: $padding-y * 2 + $line-height;

  [class*='#{$namespace}-icon'] {
    font-size: $icon-size;
    font-weight: normal;

    &:not(.is-loading) + span {
      margin-left: $spacing-gap;
    }

    svg {
      vertical-align: bottom;
    }
  }

  span + [class*='#{$namespace}-icon'] {
    margin-left: $spacing-gap;
  }

  span:empty {
    display: none;
  }
}

@mixin button-icon-size($padding, $icon-size, $border-radius) {
  height: $padding * 2 + $icon-size;
  width: $padding * 2 + $icon-size;
  min-height: $padding * 2 + $icon-size;
  min-width: $padding * 2 + $icon-size;
  padding: $padding;
  font-size: $icon-size;
  border-radius: $border-radius;

  [class*='#{$namespace}-icon'] {
    font-size: $icon-size;
  }
}