@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$badge: () !default;
$badge: map.merge(
  (
    color: value('color-white'),
    bg-color: value('color-error-base'),
    b-color: value('color-error-opacity-8'),
    line-height: value('line-height-secondary'),
    height: 16px,
    v-padding: 0,
    h-padding: 6px,
    family: #{Helvetica,
    'Microsoft YaHei',
    SimSun,
    sans-serif},
    font-size: value('font-size-secondary'),
    dot-size: 7px
  ),
  $badge
);

.#{$namespace}-badge {
  &-vars {
    @include define-preset-values('badge', $badge);
  }

  @mixin define-badge-style($style-map) {
    @include define-preset-style('badge', $style-map);
  }

  $types: primary info success warning;

  @include basis {
    position: relative;
    display: inline-flex;
  }

  &--not-wrapper {
    line-height: 1;
    vertical-align: middle;
  }

  &--not-wrapper#{&}--is-dot {
    display: inline-flex;
  }

  &__content {
    position: relative;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: value('badge-height');
    padding: value('badge-v-padding') value('badge-h-padding');
    font-family: value('badge-family');
    font-size: value('badge-font-size');
    line-height: value('badge-line-height');
    color: value('badge-color');
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    background-color: value('badge-bg-color');
    border-radius: calc(value('badge-height') * 0.5);
    box-shadow: value('shadow-border') value('badge-b-color');
    transform-origin: center center;

    &--fixed {
      position: absolute;
      inset-inline-end: 0;
      top: 0;
      transform: translate(50%, -50%);

      @include rtl {
        transform: translate(-50%, -50%);
      }
    }

    @each $type in $types {
      &--#{$type} {
        @include define-badge-style(
          (
            bg-color: 'color' $type 'base',
            b-color: 'color' $type 'opacity-8'
          )
        );
      }
    }

    &--disabled {
      @include define-badge-style(
        (
          bg-color: 'content-color-disabled',
          b-color: 'border-color-light-2'
        )
      );
    }
  }

  &--is-dot &__content {
    width: value('badge-dot-size');
    height: value('badge-dot-size');
    padding: 0;
    border-radius: 50%;
  }
}