@use 'sass:color';

@use './function.scss' as *;
@use './mixins' as *;

@mixin button-plain($type) {
  background-color: transparent;
  color: getCssVar('color', $type);
  &:active {
    color: getCssVar('color', $type, 'active');
  }
  &.is-disabled {
    @include button-disabled($type, plain);
  }
}

@mixin button-dashed() {
  border-style: dashed;
}

@mixin button-bg($type) {
  background-color: getCssVar('color', $type, 'light');
  &:active {
    background-color: getCssVar('color', $type, 'light-active');
  }
}

@mixin button-text($type) {
  background-color: transparent;
  border-color: transparent;
  color: getCssVar('color', $type);
  &:active {
    color: getCssVar('color', $type, 'active');
  }
  &.is-disabled {
    @include button-disabled($type, text);
  }
}

@mixin button-disabled($type: null, $btn-type: null) {
  cursor: not-allowed;

  @if $btn-type == null {
    color: getCssVar('text', 'white', '1');
    background-color: getCssVar('color', $type, 'disabled');
    border-color: getCssVar('color', $type, 'disabled');
    &:active {
      background-color: getCssVar('color', $type, 'disabled');
      border-color: getCssVar('color', $type, 'disabled');
    }
  }

  @if $btn-type == plain {
    color: getCssVar('color', $type, 'disabled');
    border-color: getCssVar('color', $type, 'disabled');
    &.#{$namespace}-button--bg {
      &:active {
        background-color: getCssVar('color', $type, 'light');
      }
    }
    &:active {
      background-color: transparent;
    }
  }

  @if $btn-type == text {
    background-color: transparent;
    border-color: transparent !important;
    color: getCssVar('color', $type, 'disabled');
    &.#{$namespace}-button--bg {
      &:active {
        background-color: getCssVar('color', $type, 'light');
      }
    }
    &:active {
      background-color: transparent;
    }
  }
}

@mixin button-normal($type, $text-color) {
  background-color: getCssVar('color', $type);
  border-color: getCssVar('color', $type);
  color: $text-color;
  &:active {
    background-color: getCssVar('color', $type, 'active');
    border-color: getCssVar('color', $type, 'active');
  }
  &.is-disabled {
    @include button-disabled($type);
  }
}

@mixin button-style($types, $text-color) {
  @each $type in $types {
    @include m($type) {
      @include button-normal($type, $text-color);
      &.#{$namespace}-button--text {
        @include button-text($type);
        &.#{$namespace}-button--bg {
          @include button-bg($type);
        }
      }
      &.#{$namespace}-button--plain {
        @include button-plain($type);
        &.#{$namespace}-button--bg {
          @include button-bg($type);
        }
      }

      &.#{$namespace}-button--dashed {
        @include button-dashed();
      }
    }
  }
}

@mixin button-default() {
  &:active {
    background-color: getCssVar('gray', '5');
    border-color: getCssVar('gray', '5');
  }

  @include m(plain) {
    background-color: transparent;
    color: getCssVar('text', 'gray', '1');
    border-color: getCssVar('gray', '5');
    &:active {
      background-color: transparent;
      border-color: getCssVar('gray', '7');
    }
  }

  @include m(text) {
    background-color: transparent;
    color: getCssVar('text', 'color', 'primary');
    border-color: transparent;
    &:active {
      color: getCssVar('text', 'color', 'primary');
      background-color: transparent;
      border-color: transparent;
    }
    &.#{$namespace}-button--bg {
      background-color: getCssVar('gray', '3');
      &:active {
        background-color: getCssVar('gray', '5');
      }
    }
  }
}