.host {
  display: flex;
  padding-block: var(--vkui--spacing_size_s);
  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
  color: var(--vkui--color_text_subhead);
}

.modeAccent {
  color: var(--vkui--color_text_primary);
}

.before {
  -webkit-margin-end: var(--vkui--spacing_size_xl);
          margin-inline-end: var(--vkui--spacing_size_xl);
  color: var(--vkui--color_icon_secondary);
}

.middle {
  display: flex;
  flex: 1;
  align-items: center;
  min-inline-size: 0;
  overflow: hidden;
}

.content {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: nowrap;
}

.textWrapShort .content {
  display: -webkit-box;
  max-block-size: 60px;
  -webkit-line-clamp: 3;
  white-space: initial;
  -webkit-box-orient: vertical;
}

.textWrapFull .content {
  overflow: inherit;
  white-space: initial;
}

.textWrapNowrap .content {
  flex: 0 1 auto;
}

.after {
  margin-block: calc(-1 * var(--vkui--spacing_size_2xs));
  -webkit-margin-start: var(--vkui--spacing_size_xl);
          margin-inline-start: var(--vkui--spacing_size_xl);
}

.modeAdd,
.modeMore {
  color: var(--vkui--color_text_link_themed);
}

.modeAdd .before,
.modeMore .before {
  color: var(--vkui--color_icon_accent_themed);
}

.modeMore {
  padding-block: 10px;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

.middle :global(.vkuiIcon) {
  -webkit-margin-start: var(--vkui--spacing_size_xs);
          margin-inline-start: var(--vkui--spacing_size_xs);
  color: var(--vkui--color_icon_secondary);
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

.modeAdd .middle :global(.vkuiIcon),
.modeMore
  .middle
  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
  :global(.vkuiIcon) {
  color: var(--vkui--color_icon_accent_themed);
}