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

$--color-white: #ffffff;

@mixin button-plain($type) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        $type,
      ),
      'bg-color': (
        'color',
        $type,
        'light-9',
      ),
      'border-color': (
        'color',
        $type,
        'light-5',
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        'white',
      ),
      'bg-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
      ),
    ),
    'active': (
      'text-color': (
        'color',
        'white',
      ),
    ),
  );

  @each $type, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(('button', $type, $typeColor), $list);
    }
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: getCssVar('color', $type, 'light-5');
      background-color: getCssVar('color', $type, 'light-9');
      border-color: getCssVar('color', $type, 'light-8');
    }
  }
}

@mixin button-dashed($type) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        $type,
      ),
      'bg-color': (
        'color',
        $type,
        'light-9',
      ),
      'border-color': (
        'color',
        $type,
        'light-5',
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        $type,
      ),
      'bg-color': (
        'color',
        $type,
        'light-9',
      ),
      'border-color': (
        'color',
        $type,
        'light-3',
      ),
    ),
    'active': (
      'text-color': (
        'color',
        $type,
        'dark-2',
      ),
      'bg-color': (
        'color',
        $type,
        'light-9',
      ),
      'border-color': (
        'color',
        $type,
        'dark-2',
      ),
    ),
  );

  @each $type, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(('button', $type, $typeColor), $list);
    }
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: getCssVar('color', $type, 'light-5');
      background-color: getCssVar('color', $type, 'light-9');
      border-color: getCssVar('color', $type, 'light-8');
    }
  }
}

@mixin button-variant($type) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        'white',
      ),
      'bg-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
      ),
      'outline-color': (
        'color',
        $type,
        'light-5',
      ),
      'active-color': (
        'color',
        $type,
        'dark-2',
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        'white',
      ),
      'link-text-color': (
        'color',
        $type,
        'light-5',
      ),
      'bg-color': (
        'color',
        $type,
        'light-3',
      ),
      'border-color': (
        'color',
        $type,
        'light-3',
      ),
    ),
    'active': (
      'bg-color': (
        'color',
        $type,
        'dark-2',
      ),
      'border-color': (
        'color',
        $type,
        'dark-2',
      ),
    ),
    'disabled': (
      'text-color': (
        'color',
        'white',
      ),
      'bg-color': (
        'color',
        $type,
        'light-5',
      ),
      'border-color': (
        'color',
        $type,
        'light-5',
      ),
    ),
  );

  @each $type, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(('button', $type, $typeColor), $list);
    }
  }

  &.is-plain,
  &.is-text,
  &.is-link {
    @include button-plain($type);
  }

  &.is-dashed {
    @include button-dashed($type);
  }
}

@mixin button-variant-custom(
  $color,
  $background-color,
  $background-color-hover,
  $background-color-disabled
) {
  color: $color;
  background: $background-color;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover,
  &:focus {
    background: $background-color-hover;
    border: none;
    color: $color;
    transition: all 0.4s ease-in-out;
  }

  &:active {
    background: $background-color-hover;
    border: none;
    color: $color;
    outline: none;
  }

  &.is-active {
    background: $background-color-hover;
    border: none;
    color: $color;
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: $--color-white;
      background: $background-color-disabled;
      border: none;
    }
  }

  //&.is-plain {
  //  @include button-plain($background-color);
  //}
}

@mixin button-variant-custom-tow(
  $color,
  $background-color,
  $box-shadow-color,
  $background-color-hover,
  $box-shadow-color-hover,
  $background-color-disabled
) {
  color: $color;
  box-shadow: $box-shadow-color;
  background-image: $background-color;
  background-size: 300% 100%;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover,
  &:focus {
    background-image: $background-color-hover;
    background-position: 100% 0;
    border: none;
    box-shadow: $box-shadow-color-hover;
    color: $color;
    transition: all 0.4s ease-in-out;
  }

  &:active {
    background: $background-color-hover;
    border: none;
    color: $color;
    outline: none;
  }

  &.is-active {
    background: $background-color-hover;
    border: none;
    color: $color;
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: $--color-white;
      background: $background-color-disabled;
      border: none;
      background-size: 300% 100%;
    }
  }

  //&.is-plain {
  //  @include button-plain($background-color);
  //}
}

@mixin button-variant-custom-three(
  $color,
  $background,
  $border-color,
  $color-hover,
  $background-image-hover,
  $box-shadow-hover,
  $border-color-hover,
  $color-disabled,
  $background-disabled,
  $border-color-disabled
) {
  background-size: 300% 100%;
  color: $color;
  background: $background;
  border-color: $border-color;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover,
  &:focus {
    color: $color-hover;
    background-image: $background-image-hover;
    background-position: 100% 0;
    box-shadow: $box-shadow-hover;
    transition: all 0.4s ease-in-out;
    border-color: $border-color-hover;
  }

  &:active {
    color: $color-hover;
    background-image: $background-image-hover;
    background-position: 100% 0;
    box-shadow: $box-shadow-hover;
    transition: all 0.4s ease-in-out;
    border-color: $border-color-hover;
  }

  &.is-active {
    color: $color-hover;
    background-image: $background-image-hover;
    background-position: 100% 0;
    box-shadow: $box-shadow-hover;
    transition: all 0.4s ease-in-out;
    border-color: $border-color-hover;
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: $color-disabled;
      background: $background-disabled;
      box-shadow: none;
      transition: all 0.4s ease-in-out;
      border-color: $border-color-disabled;
    }
  }

  //&.is-plain {
  //  @include button-plain($background-color);
  //}
}

@mixin button-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $border-radius
) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}