.lbaic-settings-badge {
  --lbaic-settings-badge-bg: var(--lbaic-settings-badge-default-bg);
  --lbaic-settings-badge-color: var(--lbaic-settings-badge-default-color);
  --lbaic-settings-loading-circle-width: 16px;

  width: max-content;
  height: var(--lbaic-settings-badge-height);
  flex: 0 0 max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline-start: var(--lbaic-settings-badge-pi-start);
  padding-inline-end: var(--lbaic-settings-badge-pi-end);
  background-color: var(--lbaic-settings-badge-bg);
  border-radius: 25px;

  &-h-21 {
    --lbaic-settings-badge-height: 21px;
  }

  &-h-25 {
    --lbaic-settings-badge-height: 25px;
  }

  &-pi-8 {
    --lbaic-settings-badge-pi-start: 8px;
    --lbaic-settings-badge-pi-end: 8px;
  }

  &-pi-12 {
    --lbaic-settings-badge-pi-start: 12px;
    --lbaic-settings-badge-pi-end: 12px;
  }

  &-i {
    width: 16px;
    flex: 0 0 16px;
    height: auto;
    display: block;
    fill: var(--lbaic-settings-badge-color);
  }

  &-label {
    flex: 0 0 auto;
    font-size: var(--lbaic-settings-fs-11);
    color: var(--lbaic-settings-badge-color);
    line-height: var(--lbaic-settings-lh-18);

    &:not(:first-child:last-child) {
      &:first-child {
        padding-inline-end: 4px;
      }

      &:last-child {
        padding-inline-start: 4px;
      }
    }
  }

  &-gray {
    --lbaic-settings-badge-bg: rgba(var(--lbaic-settings-black-rgb), 0.1);
    --lbaic-settings-badge-color: rgba(var(--lbaic-settings-black-rgb), 1);
  }

  &-red {
    --lbaic-settings-badge-bg: rgba(var(--lbaic-settings-badge-red-rgb), 0.1);
    --lbaic-settings-badge-color: rgba(var(--lbaic-settings-badge-red-rgb), 1);
  }

  &-green {
    --lbaic-settings-badge-bg: rgba(var(--lbaic-settings-badge-green-rgb), 0.1);
    --lbaic-settings-badge-color: rgba(var(--lbaic-settings-badge-green-rgb), 1);
    border-radius: 6px;
  }

  &-mis-auto {
    margin-inline-start: auto;
  }

  &-blur {
    --lbaic-settings-badge-bg: var(--lbaic-settings-badge-blur-bg);
    --lbaic-settings-badge-color: var(--lbaic-settings-badge-blur-color);
    --lbaic-settings-badge-height: 17px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    margin-inline: auto;
    margin-bottom: 10px;
    padding-block: 2px;
    border-radius: 4px;
    backdrop-filter: blur(5px);
  }

  &-icon-only {
    padding: 4px;
    border-radius: 20px;
  }
}