.host {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  block-size: 32px;
  border-radius: 6px;
}

.modePrimary {
  background: var(--vkui--color_background_content);
  border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
}

.modeSecondary {
  background: var(--vkui--color_background_secondary);
}

.in,
.removable {
  position: relative;
  display: flex;
  align-items: center;
  block-size: 100%;
  border-radius: inherit;
}

.in {
  -webkit-padding-start: 8px;
          padding-inline-start: 8px;
  overflow: hidden;
}

.in:last-of-type {
  -webkit-padding-end: 8px;
          padding-inline-end: 8px;
}

.content {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--vkui--font_paragraph--font_family--regular);

  /* Typography/Paragraph */
  font-size: var(--vkui--font_paragraph--font_size--regular);
  font-weight: var(--vkui--font_paragraph--font_weight--regular);
  line-height: var(--vkui--font_paragraph--line_height--regular);
  color: var(--vkui--color_text_primary);
  white-space: nowrap;
}

.sizeYCompact .content {
  font-family: var(--vkui--font_footnote--font_family--regular);
  /* Typography/Footnote */
  font-size: var(--vkui--font_footnote--font_size--regular);
  font-weight: var(--vkui--font_footnote--font_weight--regular);
  line-height: var(--vkui--font_footnote--line_height--regular);
}

@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
  .sizeYNone .content {
    font-family: var(--vkui--font_footnote--font_family--regular);
    /* Typography/Footnote */
    font-size: var(--vkui--font_footnote--font_size--regular);
    font-weight: var(--vkui--font_footnote--font_weight--regular);
    line-height: var(--vkui--font_footnote--line_height--regular);
  }
}

.removable {
  flex-grow: 0;
  flex-shrink: 0;
}

.remove {
  box-sizing: border-box;
  flex: 0 0 100%;
  padding: 5px;
  color: var(--vkui--color_icon_secondary);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: inherit;
  transform: translateX(-1px);
}

.before {
  -webkit-margin-end: 6px;
          margin-inline-end: 6px;
}

.after {
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
}

.sizeYCompact {
  block-size: 28px;
}

@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
  .sizeYNone {
    block-size: 28px;
  }
}