@import '../style/theme/color';
@import '../style/core/font';
@import '../style/theme/corner';
@import '../style/core/animation';

$devui-btn-loading-color: $devui-text;
$devui-btn-xs-padding: 0 4px;
$devui-btn-xs-height: 24px;
$devui-btn-icon-xs-min-width: 24px;
$devui-btn-xs-min-width: 48px;
$devui-btn-sm-padding: var(--devui-btn-sm-padding, 0 16px);
$devui-btn-sm-min-width: 56px;
$devui-btn-icon-sm-min-width: 24px;
$devui-btn-sm-height: 24px;
$devui-btn-min-width: 64px;
$devui-btn-height: 28px;
$devui-btn-padding: var(--devui-btn-padding, 0 20px);
$devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
$devui-btn-lg-min-width: 72px;
$devui-btn-icon-lg-min-width: 32px;
$devui-btn-lg-height: 32px;
$devui-btn-xs-font-size: $devui-font-size-sm;
$devui-btn-sm-font-size: $devui-font-size-sm;
$devui-btn-font-size: $devui-font-size-md;
$devui-btn-lg-font-size: $devui-font-size-lg;
$devui-btn-line-height: $devui-line-height-base;
$devui-btn-border-radius: var(--devui-btn-border-radius, $devui-border-radius);
$devui-btn-primary-bg-disabled: var(--devui-btn-primary-bg-disabled, $devui-primary-disabled);
$devui-btn-primary-text-disabled: var(--devui-btn-primary-text-disabled, $devui-light-text);

$devui-btn-normal-config: (
  text: (
    color: $devui-brand-active,
    padding: 0,
  ),
  text-dark: (
    color: $devui-brand-active,
    padding: 0,
  ),
  common: (
    color: $devui-text,
    min-width: $devui-btn-min-width,
    background-color: var(--devui-btn-common-bg, $devui-base-bg),
    border-color: var(--devui-btn-common-border-color, $devui-line),
  ),
  stress: (
    color: $devui-light-text,
    min-width: $devui-btn-min-width,
    background-color: $devui-primary,
  ),
  primary: (
    color: $devui-light-text,
    min-width: $devui-btn-min-width,
    background-color: $devui-primary,
  ),
  danger: (
    color: $devui-light-text,
    min-width: $devui-btn-min-width,
    background-color: $devui-contrast,
  ),
  xs: (
    padding: $devui-btn-xs-padding,
    height: $devui-btn-xs-height,
    font-size: $devui-btn-xs-font-size,
    min-width: $devui-btn-xs-min-width,
  ),
  sm: (
    padding: $devui-btn-sm-padding,
    height: $devui-btn-sm-height,
    font-size: $devui-btn-sm-font-size,
    min-width: $devui-btn-sm-min-width,
  ),
  lg: (
    padding: $devui-btn-lg-padding,
    height: $devui-btn-lg-height,
    font-size: $devui-btn-lg-font-size,
    min-width: $devui-btn-lg-min-width,
  ),
  left: (
    border-radius: $devui-border-radius 0 0 $devui-border-radius,
  ),
  right: (
    border-radius: 0 $devui-border-radius $devui-border-radius 0,
  ),
  default: (
    border-radius: $devui-border-radius,
  ),
);

$devui-btn-pseudo-config: (
  text: (
    hover: (
      background-color: transparent,
      color: $devui-brand-active-focus,
    ),
    active: (
      background-color: transparent,
      color: $devui-brand-active-focus,
    ),
  ),
  text-dark: (
    hover: (
      background-color: transparent,
      color: $devui-brand-active-focus,
    ),
    active: (
      background-color: transparent,
      color: $devui-brand-active-focus,
    ),
  ),
  common: (
    hover: (
      border-color: var(--devui-btn-common-border-color-hover, $devui-form-control-line-active),
      color: var(--devui-btn-common-color-hover, $devui-brand-active),
      background-color: var(--devui-btn-common-bg-hover, $devui-base-bg),
    ),
    active: (
      border-color: var(--devui-btn-common-border-color-active, $devui-form-control-line-active),
      color: var(--devui-btn-common-color-active, $devui-brand-active),
      background-color: var(--devui-btn-common-bg-active, $devui-base-bg),
    ),
  ),
  stress: (
    hover: (
      background-color: $devui-primary-hover,
    ),
    active: (
      background-color: $devui-primary-active,
    ),
  ),
  primary: (
    hover: (
      background-color: $devui-primary-hover,
    ),
    active: (
      background-color: $devui-primary-active,
    ),
  ),
  danger: (
    hover: (
      background-color: $devui-contrast-hover,
    ),
    active: (
      background-color: $devui-contrast-active,
    ),
  ),
);

.devui-btn {
  padding: $devui-btn-padding;
  font-size: $devui-btn-font-size;
  height: $devui-btn-height;
  line-height: $devui-btn-line-height;
  border-radius: $devui-btn-border-radius;
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  transform: scale(1);
  @each $type in common, stress, primary, danger, left, right, xs, sm, lg, text, text-dark {
    &.devui-btn-#{$type} {
      @each $key, $value in map-get($devui-btn-normal-config, $type) {
        #{$key}: $value;
      }
    }
  }
  @each $type in text, text-dark, common, stress, primary, danger {
    &.devui-btn-#{$type} {
      @each $pseudo, $value in map-get($devui-btn-pseudo-config, $type) {
        &:#{$pseudo} {
          @each $key, $value2 in map-get(map-get($devui-btn-pseudo-config, $type), $pseudo) {
            #{$key}: $value2;
          }
        }
      }
    }
  }

  &.devui-btn-common {
    &:disabled {
      color: var(--devui-btn-common-text-disabled, $devui-disabled-text);
      background: var(--devui-btn-common-bg-disabled, $devui-disabled-bg);
      border-color: var(--devui-btn-common-border-disabled, $devui-disabled-line);
    }
  }

  &.devui-btn-primary {
    &:disabled {
      color: $devui-btn-primary-text-disabled;
      background: $devui-btn-primary-bg-disabled;
      border-color: transparent;
    }
  }

  &.devui-btn-danger {
    &:disabled {
      color: $devui-light-text;
      background: $devui-red-20;
      border: 1px solid $devui-red-20;
    }
  }

  &.devui-btn-text-dark {
    &:disabled {
      color: $devui-disabled-text;
    }
  }

  &.devui-btn-text {
    &:disabled {
      color: $devui-disabled-text;
    }
  }

  &.bordered {
    &.devui-btn-common {
      color: $devui-text;
      border-color: transparent;

      &:hover,
      &:focus {
        border-color: $devui-primary-hover;
      }

      &:active {
        border-color: $devui-primary-active;
      }
    }

    &.devui-btn-stress,
    &.devui-btn-primary {
      border-color: $devui-brand;
      color: $devui-brand;
      background-color: $devui-block;
    }

    &.devui-btn-success {
      border-color: $devui-success;
      color: $devui-success;
      background-color: $devui-block;
    }

    &.devui-btn-warning {
      border-color: $devui-warning;
      color: $devui-warning;
      background-color: $devui-block;
    }

    &.devui-btn-danger {
      border-color: $devui-danger;
      color: $devui-danger;
      background-color: $devui-block;
    }
  }

  &.d-btn-icon:not(.devui-btn-primary):not(.devui-btn-danger):not(.devui-btn-common) {
    &:hover,
    &:focus {
      border: 1px solid $devui-list-item-hover-bg;
      background-color: $devui-list-item-hover-bg;
    }

    &:disabled {
      background-color: $devui-disabled-bg;
    }
  }

  &:not(:disabled) {
    &.devui-btn-text,
    &.devui-btn-text-dark {
      &.d-btn-icon-wrap {
        color: $devui-text;

        .devui-icon-fix {
          color: $devui-icon-fill;
        }

        &:hover {
          color: $devui-icon-fill-hover;

          .devui-icon-fix {
            color: $devui-icon-fill-hover;
          }
        }
      }
    }
  }

  &.mouseDown:not(:disabled) {
    transform: scale(0.95);
  }
}

.devui-loading {
  .devui-loading-default-spinner {
    div {
      background-color: $devui-text;
    }
  }
}

:host {
  display: inline-block;
}

.devui-btn {
  transition:
    background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
    border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
    color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
  border-style: solid;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;

  &:disabled,
  &[disabled] {
    cursor: not-allowed;
  }

  &.d-btn-icon {
    padding: 8px 8px;
    line-height: 1em;
    min-width: unset;
    border: 1px solid transparent; // 待废弃，兼容旧版本button common类型无边框

    &:not(.devui-btn-common) {
      border: 1px solid transparent;
    }

    &.devui-btn-xs,
    &.devui-btn-sm {
      padding: 4px;
    }

    &.devui-btn-xs {
      min-width: $devui-btn-icon-xs-min-width;
    }

    &.devui-btn-sm {
      min-width: $devui-btn-icon-sm-min-width;
    }

    &.devui-btn-lg {
      .icon {
        font-size: $devui-font-size-icon;
      }

      min-width: $devui-btn-icon-lg-min-width;
    }
  }

  &:not(.d-btn-icon) {
    .icon-fix {
      font-size: $devui-font-size-icon;
    }
  }
}

.devui-icon-fix {
  position: relative;
  font-size: $devui-font-size;
  pointer-events: none;

  &::before {
    transition: color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
  }
}

.devui-btn.devui-btn-common:not(:disabled) {
  .devui-icon-fix {
    color: $devui-text-weak;
  }

  &:hover,
  &:active,
  &:focus {
    .devui-icon-fix {
      color: $devui-icon-fill-active;
    }
  }
}

.button-content {
  display: inline-block;
  position: relative;
  pointer-events: none;
}

.clear-right-8 {
  margin-right: 8px;
}

.devui-btn-more-text-omits {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.devui-btn-circle {
  border-radius: 100%;
}

.devui-button-water-wave {
  position: absolute;
  background-color: $devui-base-bg;
  border-radius: 50%;
  opacity: 0;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  animation: waterWave $devui-animation-duration-slow $devui-animation-linear;
}

@keyframes waterWave {
  0% {
    opacity: 0.2;
    width: 30px;
    height: 30px;
  }

  100% {
    opacity: 0;
    width: 200px;
    height: 200px;
  }
}
