:host {
  display: flex;

  .us-notification {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font: var(--text-p-xs-heavy);
    background-color: var(--notification-bg-color);
    color: var(--notification-text-color);
    &_counter {
      min-width: var(--size-m);
      min-height: var(--size-m);
    }
    &_dot {
      min-width: 10px;
      min-height: 10px;
    }
  
    &__hidden {
      display: none;
    }

    &__max-displayed {
      min-width: var(--size-l);
      border-radius: 20px;
    }
  }
}