@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:list';
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use '@components/badge/style/token.scss' as token;
@use '@components/badge/style/token.scss' as *;

$badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');

@function token-var($name, $fallback: null) {
  $value: map.get(meta.module-variables('token'), $name);

  @if $value == null {
    @return $fallback;
  }

  @return $value;
}

.#{$badge-prefix-cls} {
  position: relative;
  display: inline-block;
  line-height: 1;

  &-rtl {
    direction: rtl;
  }

  &-number,
  &-dot,
  &-text,
  &-custom-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    border-radius: $badge-size-count-height;
    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
  }

  &-rtl &-number,
  &-rtl &-dot,
  &-rtl &-text,
  &-rtl &-custom-dot {
    right: unset;
  }

  &-custom-dot {
    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
  }

  &-number,
  &-text {
    min-width: $badge-size-count-height;
    height: $badge-size-count-height;
    padding: 0 $badge-padding-count-horizontal;
    color: $badge-color-count-text;
    font-weight: $badge-font-count-weight;
    font-size: $badge-font-count-size;
    line-height: $badge-size-count-height;
    background-color: $badge-color-count-bg;
    box-shadow: 0 0 0 2px var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
  }

  &-dot {
    width: $badge-size-dot-width;
    height: $badge-size-dot-width;
    background-color: $badge-color-count-bg;
    border-radius: global.$radius-circle;
    box-shadow: 0 0 0 2px var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
  }

  &-no-children &-dot,
  &-no-children &-number,
  &-no-children &-text {
    position: relative;
    top: unset;
    right: unset;
    display: inline-block;
    transform: none;
  }

  &-status-wrapper {
    display: inline-flex;
    align-items: center;
  }

  &-status-dot {
    display: inline-block;
    width: $badge-size-dot-width;
    height: $badge-size-dot-width;
    border-radius: global.$radius-circle;
  }

  &-status-normal {
    background-color: $badge-color-dot-bg_default;
  }

  &-status-processing {
    background-color: $badge-color-dot-bg_processing;
  }

  &-status-success {
    background-color: $badge-color-dot-bg_success;
  }

  &-status-warning {
    background-color: $badge-color-dot-bg_warning;
  }

  &-status-danger {
    background-color: $badge-color-dot-bg_error;
  }

  $colors:
    'red', 'orangered', 'orange', 'gold', 'lime', 'green', 'cyan', 'sdblue', 'purple', 'pinkpurple',
    'magenta', 'gray';

  @mixin for($data, $i: 1) {
    @if $i <= list.length($data) {
      $color-name: list.nth($data, $i);

      $color: string.unquote('badge-#{$color-name}-color-dot-bg');

      &-color-#{$color-name} {
        background-color: token-var($color);
      }

      @include for($data, ($i + 1));
    }
  }

  @include for($colors);

  .#{$badge-prefix-cls}-status-text {
    margin-left: $badge-margin-status-text-left;
    color: $badge-color-status-text;
    font-size: $badge-font-status-text-size;
    line-height: theme.$line-height-base;
  }

  &-rtl &-status-text {
    margin-right: $badge-margin-status-text-left;
    margin-left: 0;
  }

  &-number-text {
    display: inline-block;
    animation: #{theme.$prefix}-badge-scale theme.$transition-duration-5
      theme.$transition-timing-function-overshoot;
  }
}

@keyframes #{theme.$prefix}-badge-scale {
  from {
    transform: scale(0.5, 0.5);
  }

  to {
    transform: scale(1, 1);
  }
}

.badge-zoom-enter,
.badge-zoom-appear {
  transform: translate(50%, -50%) scale(0.5, 0.5);
  // opacity: 0;
  transform-origin: center;
}

.badge-zoom-enter-active,
.badge-zoom-appear-active {
  transform: translate(50%, -50%) scale(1, 1);
  transform-origin: center;
  opacity: 1;
  transition:
    opacity theme.$transition-duration-3 theme.$transition-timing-function-overshoot,
    transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
}

.badge-zoom-exit {
  transform: translate(50%, -50%) scale(1, 1);
  transform-origin: center;
  opacity: 1;
}

.badge-zoom-exit-active {
  transform: translate(50%, -50%) scale(0.5, 0.5);
  transform-origin: center;
  opacity: 0;
  transition:
    opacity theme.$transition-duration-3 theme.$transition-timing-function-overshoot,
    transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
}