.us-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 var(--space-inline-m);
  min-height: var(--header-primary-min-height);
  padding: var(--header-primary-v-padding) calc(var(--header-primary-h-padding) - 1px) calc(var(--header-primary-v-padding) - var(--header-primary-border-bottom-width));
  color: var(--header-primary-text-color);
  background-color: var(--header-primary-bg-color);
  border-bottom: var(--header-primary-border-bottom-width) var(--header-primary-border-bottom-style) var(--header-primary-border-bottom-color);

  &__left {
    display: flex;
    align-items: center;
    flex-grow: 1;
  }

  &__back-btn {
    margin-right: var(--space-inline-m);
  }

  &__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0  var(--space-inline-xl);
    flex-grow: 1;
    flex-wrap: wrap;

    &__block{
      display: flex;
      align-items: center;
    }
  }

  &__readonly{
    display: flex;
    align-items: center;
  }

  &__icon {
    display: flex;
    margin-right: var(--space-inline-m);
  }

  &__icon,
  &__close,
  &__menu-btn,
  &__back-btn {
    color: var(--header-primary-icon-color);
  }

  &__menu-btn {
    border-radius: var(--button-icon-secondary-m-border-radius);
  }

  &__title {
    max-width: 284px;
    word-break: break-word;
    font: var(--header-primary-title-font-style);
  }

  &__additional-info {
    font: var(--text-p-xs-light);
    color: var(--color-text-900);
  }

  &__right {
    display: flex;
    align-items: center;
    gap: 0 var(--space-inline-s);
  }

  &_variant_secondary {
    min-height: var(--header-secondary-min-height);
    padding: var(--header-secondary-v-padding) var(--header-secondary-h-padding) calc(var(--header-secondary-v-padding) - var(--header-secondary-border-bottom-width));
    color: var(--header-secondary-text-color);
    background-color: var(--header-secondary-bg-color);
    border-bottom: var(--header-secondary-border-bottom-width) var(--header-secondary-border-bottom-style) var(--header-secondary-border-bottom-color);

    .us-header__title {
      max-width: none;
      font: var(--header-secondary-title-font-style);
    }

    &__icon,
    &__close,
    &__menu-btn,
    &__back-btn {
      color: var(--header-secondary-icon-color);
    }
  }
}
