@import '../colors';

$size-small: 12px;
$size-medium: 14px;
$border-width: 2px;

.tix-badge.v4 {
  display: inline-block;
  position: relative;

  > *:first-child {
    display: block;
  }

  .tb-notif {
    text-align: center;
    width: max-content;
    border: solid $border-width $color-N0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: $color-R500;
    box-sizing: content-box;

    @at-root {
      .medium#{&} {
        border-radius: $size-medium + (2 * $border-width) / 2;
        height: $size-medium;
        min-width: $size-medium;
      }
      .small#{&} {
        border-radius: $size-small + (2 * $border-width) / 2;
        height: $size-small;
        min-width: $size-small;
      }
    }

    small {
      margin: 0px 4px;
      display: block;
    }

    @at-root {
      .has-children#{&} {
        position: absolute;
      }
      .has-children.top#{&} {
        top: 0px;
        left: 50%;
        transform: translate(-50%, calc(-50% + #{$border-width}));
      }
      .has-children.top-end#{&} {
        top: 0px;
        right: 0px;
        transform: translate(
          calc(50% - #{$border-width}),
          calc(-50% + #{$border-width})
        );
      }
    }
  }
}