div {
  width: fit-content;
  overflow: hidden;
  p {
    @apply com-flex com-items-center com-m-0 com-px-1 com-py-2px;

    nb-icon {
      font-size: 1rem;
    }

    &.small-text {
      @apply com-py-1 com-px-2 com-text-xs;

      nb-icon {
        font-size: 16px;
      }
    }

    &.x-small-text {
      @apply com-py-1 com-px-6px com-text-10px com-font-medium;

      nb-icon {
        @apply com-text-sm;
      }
    }

    &.xx-small-text {
      @apply com-py-2px com-px-1 com-leading-3 com-text-8px com-font-medium;

      nb-icon {
        @apply com-text-sm;
      }
    }
  }

  &.rectangle {
    @apply com-rounded;
  }
  &.semi-round {
    @apply com-rounded-xl;
  }

  &.round {
    @apply com-rounded-3xl;
  }

  &.dotmode {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    p {
      display: none;
    }
  }
}

:host.top.right {
  position: absolute;
  top: 0;
  right: 0;
}

:host.top.left {
  position: absolute;
  top: 0;
  left: 0;
}

:host.right.center {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

:host.left.center {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
