@import (reference) "./../styles/less/mixins/_logical-properties.less";

@badge-size-sm: 16px;
@badge-size-lg: 24px;

@badge-mask-sm: 2px;
@badge-mask-lg: 3px;

@badge-border-light: rgba(255, 255, 255, 0.08);
@badge-border-dark: rgba(0, 0, 0, 0.08);

.tw-badge {
  position: relative;
  display: inline-block;

  --badge-size: @badge-size-sm;
  --badge-mask: @badge-mask-sm;
  --badge-mask-offset: calc(var(--badge-size) / 2);
  --badge-border-color: @badge-border-light;
  --badge-content-position: 0px;

  &.tw-badge-lg {
    --badge-size: @badge-size-lg;
    --badge-mask: @badge-mask-lg;
  }

  &.tw-badge-border-dark {
    --badge-border-color: @badge-border-dark;
  }

  & > &__children {
    // Not possible to add a logical property (inset-inline-start) to replace left position inside a gradient.
    // RTL direction sorted out with conditional attributes.

    mask-image:
      radial-gradient(
        circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)),
        transparent 0,
        transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
        black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
      );

    [dir="rtl"] & {
      mask-image:
        radial-gradient(
          circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)),
          transparent 0,
          transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
          black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
        );
    }
  }

  & > &__content {
    position: absolute;
    width: var(--badge-size);
    height: var(--badge-size);
    bottom: var(--badge-content-position);
    .right(var(--badge-content-position));

    box-sizing: border-box;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;

    & * {
      max-height: 100%;
      max-width: 100%;
    }
  }

  &.tw-badge-border-light,
  &.tw-badge-border-dark {
    & > &__children {
      mask-image: none;
    }

    & > &__content {
      border-style: solid inset solid solid;
      border-width: 1px;
      border-color: var(--badge-border-color);
    }
  }
}