.host {
  display: flex;
  align-items: flex-start;
  padding: 0;
  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
  font-family: var(--vkui--font_family_base);
}

.before,
.subtitleBefore,
.subtitleAfter,
.contentBefore,
.contentAfter {
  display: flex;
  flex-shrink: 0;
}

.before {
  align-self: center;
  -webkit-margin-before: var(--vkui--spacing_size_2xs);
          margin-block-start: var(--vkui--spacing_size_2xs);
  -webkit-margin-end: var(--vkui--spacing_size_m);
          margin-inline-end: var(--vkui--spacing_size_m);
}

.beforeWithSubtitle {
  -webkit-margin-before: var(--vkui--spacing_size_s);
          margin-block-start: var(--vkui--spacing_size_s);
}

.subtitleWrapper {
  display: flex;
  align-items: center;
}

.subtitleBefore {
  -webkit-margin-end: var(--vkui--spacing_size_xs);
          margin-inline-end: var(--vkui--spacing_size_xs);
}

.subtitleAfter {
  -webkit-margin-start: var(--vkui--spacing_size_xs);
          margin-inline-start: var(--vkui--spacing_size_xs);
}

.contentBefore {
  -webkit-margin-end: var(--vkui--spacing_size_xs);
          margin-inline-end: var(--vkui--spacing_size_xs);
}

.contentAfter {
  -webkit-margin-start: var(--vkui--spacing_size_xs);
          margin-inline-start: var(--vkui--spacing_size_xs);
}

.main {
  flex: 1 0 0;
  min-inline-size: 0;
  color: var(--vkui--color_text_primary);
}

.content {
  display: flex;
  align-items: center;
}

.contentIn,
.subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contentMultiline {
  word-break: break-word;
  white-space: initial;
}

.subtitle {
  display: block;
  color: var(--vkui--color_text_secondary);
}

.sizeS .contentIn {
  color: var(--vkui--color_text_secondary);
}

.indicator {
  flex-shrink: 0;
  -webkit-margin-start: var(--vkui--spacing_size_xs);
          margin-inline-start: var(--vkui--spacing_size_xs);
  color: var(--vkui--color_text_secondary);
}

.host:not(.pi) .indicator {
  align-self: center;
}

.after {
  display: flex;
  white-space: nowrap;
}

/* stylelint-disable selector-max-universal */

.after.after > * {
  margin-block: 13px 7px;
  -webkit-margin-start: 12px;
          margin-inline-start: 12px;
}

.sizeS .after.after > * {
  -webkit-margin-before: 11px;
          margin-block-start: 11px;
}

.sizeM .after.after > * {
  -webkit-margin-before: 13px;
          margin-block-start: 13px;
}

.sizeL .after.after > * {
  -webkit-margin-before: 14px;
          margin-block-start: 14px;
}

.sizeXl .after.after > * {
  -webkit-margin-before: 16px;
          margin-block-start: 16px;
}

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

.after > :global(.vkuiIcon) {
  position: relative;
  color: var(--vkui--color_icon_secondary);
}

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

.sizeS .after > :global(.vkuiIcon--24) {
  margin-block: 9px 5px;
}

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

.sizeM .after > :global(.vkuiIcon--24) {
  margin-block: 10px 5px;
}

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

.sizeL .after > :global(.vkuiIcon--24) {
  margin-block: 11px 5px;
}

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

.sizeXl .after > :global(.vkuiIcon--24) {
  margin-block: 12px 5px;
}

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

.sizeS .after > :global(.vkuiIcon--16) {
  margin-block: 13px 9px;
}

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

.sizeM .after > :global(.vkuiIcon--16) {
  margin-block: 14px 9px;
}

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

.sizeL .after > :global(.vkuiIcon--16) {
  margin-block: 15px 9px;
}

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

.sizeXl .after > :global(.vkuiIcon--16) {
  margin-block: 16px 9px;
}

.content {
  -webkit-margin-before: 12px;
          margin-block-start: 12px;
}

.content:last-child {
  -webkit-margin-after: 8px;
          margin-block-end: 8px;
}

.subtitleWrapper {
  -webkit-margin-after: 7px;
          margin-block-end: 7px;
}

/**
 * CMP:
 * Group
 *
 * TODO: Переделать отрицательные отступы https://github.com/VKCOM/VKUI/issues/3508
 */

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

:global(.vkuiInternalGroup--mode-plain):not(:first-of-type) > .host:first-child,
:global(.vkuiInternalGroup--mode-plain):not(:first-of-type)
  > :global(.vkuiInternalTappable):first-child
  > .host {
  -webkit-margin-before: -16px;
          margin-block-start: -16px;
}

/* stylelint-enable selector-pseudo-class-disallowed-list */

@media (max-width: 767.9px) {
  /* stylelint-disable selector-pseudo-class-disallowed-list */
  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
    > .host:first-child,
  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
    > :global(.vkuiInternalTappable):first-child
    > .host {
    -webkit-margin-before: -16px;
            margin-block-start: -16px;
  }
  /* stylelint-enable selector-pseudo-class-disallowed-list */
}

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

:global(.vkuiInternalGroup--mode-card) > .host:not(.sizeM):first-child,
:global(.vkuiInternalGroup--mode-card)
  > :global(.vkuiInternalTappable):first-child
  > .host:not(.sizeM) {
  -webkit-margin-before: calc(-1 * var(--vkui--spacing_size_xs));
          margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
}

/* stylelint-enable selector-pseudo-class-disallowed-list */

@media (min-width: 768px) {
  /* stylelint-disable selector-pseudo-class-disallowed-list */
  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
    > .host:not(.sizeM):first-child,
  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
    > :global(.vkuiInternalTappable):first-child
    > .host:not(.sizeM) {
    -webkit-margin-before: calc(-1 * var(--vkui--spacing_size_xs));
            margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
  }
  /* stylelint-enable selector-pseudo-class-disallowed-list */
}

/**
 * Impact:
 * Link
 */

.after {
  --vkui_internal--link-color: var(--vkui--color_text_accent);
}