@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {
  @b badge {
    position: relative;
    vertical-align: middle;
    display: inline-block;

    @e content {
      background-color: var(--badge-fill);
      border-radius: var(--badge-radius);
      color: var(--color-white);
      display: inline-block;
      font-size: var(--badge-font-size);
      height: var(--badge-size);
      line-height: var(--badge-size);
      padding: 0 var(--badge-padding);
      text-align: center;
      white-space: nowrap;
      border: 1px solid var(--color-white);

      @when fixed {
        position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
        transform: translateY(-50%) translateX(100%);

        @when dot {
          right: 5px;
        }
      }

      @when dot {
        size: 8px 8px;
        padding: 0;
        right: 0;
        border-radius: 50%;
      }
    }
  }
}