.host {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  min-inline-size: var(--vkui--size_button_minimum_width--regular);
  max-inline-size: 100%;
  min-block-size: var(--vkui--size_button_small_height--compact);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--vkui--size_border_radius--regular);
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out;
}

.rounded {
  border-radius: var(--vkui--size_border_radius_rounded--regular);
}

.loading:not(.disabled) {
  /* stylelint-disable-next-line declaration-no-important -- перебиваем disabled из Clickable */
  cursor: progress !important;
}

.singleIcon {
  inline-size: var(--vkui--size_button_small_height--compact);
  min-inline-size: initial;
}

.sizeYRegular.singleIcon {
  inline-size: var(--vkui--size_button_small_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.singleIcon {
    inline-size: var(--vkui--size_button_small_height--regular);
  }
}

.stretched {
  display: block;
  flex-grow: 1;
  flex-basis: 0;
  inline-size: 100%;
}

.in {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: inherit;
  text-align: center;
}

.alignLeft .in {
  justify-content: flex-start;
  text-align: start;
}

.alignRight .in {
  justify-content: flex-end;
  text-align: end;
}

.disabled {
  opacity: var(--vkui--opacity_disable);
}

.modePrimary.disabled:not(.appearanceOverlay):not(.appearanceNegative):not(.appearancePositive),
.modeSecondary.disabled:not(.appearanceOverlay),
.modeTertiary.disabled:not(.appearanceOverlay),
.modeOutline.disabled:not(.appearanceOverlay) {
  opacity: 0.64;
}

.content {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--vkui--font_weight_accent2);
  white-space: nowrap;
}

.sizeS .content:first-child {
  -webkit-padding-start: var(--vkui--size_button_base_small_padding_horizontal--regular);
          padding-inline-start: var(--vkui--size_button_base_small_padding_horizontal--regular);
}

.sizeS .content:last-child {
  -webkit-padding-end: var(--vkui--size_button_base_small_padding_horizontal--regular);
          padding-inline-end: var(--vkui--size_button_base_small_padding_horizontal--regular);
}

.sizeM .content:first-child {
  -webkit-padding-start: var(--vkui--size_button_base_medium_padding_horizontal--regular);
          padding-inline-start: var(--vkui--size_button_base_medium_padding_horizontal--regular);
}

.sizeM .content:last-child {
  -webkit-padding-end: var(--vkui--size_button_base_medium_padding_horizontal--regular);
          padding-inline-end: var(--vkui--size_button_base_medium_padding_horizontal--regular);
}

.sizeL .content:first-child {
  -webkit-padding-start: var(--vkui--size_button_base_large_padding_horizontal--regular);
          padding-inline-start: var(--vkui--size_button_base_large_padding_horizontal--regular);
}

.sizeL .content:last-child {
  -webkit-padding-end: var(--vkui--size_button_base_large_padding_horizontal--regular);
          padding-inline-end: var(--vkui--size_button_base_large_padding_horizontal--regular);
}

.sizeS .before {
  -webkit-padding-start: var(--vkui--size_button_base_small_padding_horizontal_icon--regular);
          padding-inline-start: var(--vkui--size_button_base_small_padding_horizontal_icon--regular);
}

.sizeM .before {
  -webkit-padding-start: var(--vkui--size_button_base_medium_padding_horizontal_icon--regular);
          padding-inline-start: var(--vkui--size_button_base_medium_padding_horizontal_icon--regular);
}

.sizeL .before {
  -webkit-padding-start: var(--vkui--size_button_base_large_padding_horizontal_icon--regular);
          padding-inline-start: var(--vkui--size_button_base_large_padding_horizontal_icon--regular);
}

.sizeS .after {
  -webkit-padding-end: var(--vkui--size_button_base_small_padding_horizontal_icon--regular);
          padding-inline-end: var(--vkui--size_button_base_small_padding_horizontal_icon--regular);
}

.sizeM .after {
  -webkit-padding-end: var(--vkui--size_button_base_medium_padding_horizontal_icon--regular);
          padding-inline-end: var(--vkui--size_button_base_medium_padding_horizontal_icon--regular);
}

.sizeL .after {
  -webkit-padding-end: var(--vkui--size_button_base_large_padding_horizontal_icon--regular);
          padding-inline-end: var(--vkui--size_button_base_large_padding_horizontal_icon--regular);
}

.modeTertiary.sizeS .content:first-child {
  -webkit-padding-start: var(--vkui--size_button_tertiary_small_padding_horizontal--regular);
          padding-inline-start: var(--vkui--size_button_tertiary_small_padding_horizontal--regular);
}

.modeTertiary.sizeS .content:last-child {
  -webkit-padding-end: var(--vkui--size_button_tertiary_small_padding_horizontal--regular);
          padding-inline-end: var(--vkui--size_button_tertiary_small_padding_horizontal--regular);
}

.modeTertiary.sizeM .content:first-child {
  -webkit-padding-start: var(--vkui--size_button_tertiary_medium_padding_horizontal--regular);
          padding-inline-start: var(--vkui--size_button_tertiary_medium_padding_horizontal--regular);
}

.modeTertiary.sizeM .content:last-child {
  -webkit-padding-end: var(--vkui--size_button_tertiary_medium_padding_horizontal--regular);
          padding-inline-end: var(--vkui--size_button_tertiary_medium_padding_horizontal--regular);
}

.modeTertiary.sizeL .content:first-child {
  -webkit-padding-start: var(--vkui--size_button_tertiary_large_padding_horizontal--regular);
          padding-inline-start: var(--vkui--size_button_tertiary_large_padding_horizontal--regular);
}

.modeTertiary.sizeL .content:last-child {
  -webkit-padding-end: var(--vkui--size_button_tertiary_large_padding_horizontal--regular);
          padding-inline-end: var(--vkui--size_button_tertiary_large_padding_horizontal--regular);
}

.modeTertiary.sizeS .before {
  -webkit-padding-start: var(--vkui--size_button_tertiary_small_padding_horizontal_icon--regular);
          padding-inline-start: var(--vkui--size_button_tertiary_small_padding_horizontal_icon--regular);
}

.modeTertiary.sizeM .before {
  -webkit-padding-start: var(--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular);
          padding-inline-start: var(--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular);
}

.modeTertiary.sizeL .before {
  -webkit-padding-start: var(--vkui--size_button_tertiary_large_padding_horizontal_icon--regular);
          padding-inline-start: var(--vkui--size_button_tertiary_large_padding_horizontal_icon--regular);
}

.modeTertiary.sizeS .after {
  -webkit-padding-end: var(--vkui--size_button_tertiary_small_padding_horizontal_icon--regular);
          padding-inline-end: var(--vkui--size_button_tertiary_small_padding_horizontal_icon--regular);
}

.modeTertiary.sizeM .after {
  -webkit-padding-end: var(--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular);
          padding-inline-end: var(--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular);
}

.modeTertiary.sizeL .after {
  -webkit-padding-end: var(--vkui--size_button_tertiary_large_padding_horizontal_icon--regular);
          padding-inline-end: var(--vkui--size_button_tertiary_large_padding_horizontal_icon--regular);
}

.singleIcon .after,
.singleIcon .before,
.modeTertiary.singleIcon .after,
.modeTertiary.singleIcon .before {
  padding-inline: 0;
  margin-inline: auto;
}

.modeLink {
  min-inline-size: initial;
  background: none;
}

.modeLink .after,
.modeLink .before,
.modeLink .content:first-child,
.modeLink .content:last-child,
.stretched .after:only-child,
.stretched .before:only-child {
  padding-inline: 0;
}

.spinner {
  position: absolute;
  inset: 0;
}

.spinner + .in {
  visibility: hidden;
}

/* Button's backgrounds */

/* Mode  = Primary */

.modePrimary.appearanceAccent {
  background-color: var(--vkui--color_background_accent_themed);
}

.modePrimary.appearanceAccent.hover {
  background-color: var(--vkui--color_background_accent_themed--hover);
}

.modePrimary.appearanceAccent.active {
  background-color: var(--vkui--color_background_accent_themed--active);
}

.modePrimary.appearancePositive {
  background-color: var(--vkui--color_background_positive);
}

.modePrimary.appearancePositive.hover {
  background-color: var(--vkui--color_background_positive--hover);
}

.modePrimary.appearancePositive.active {
  background-color: var(--vkui--color_background_positive--active);
}

.modePrimary.appearanceNegative {
  background-color: var(--vkui--color_background_negative);
}

.modePrimary.appearanceNegative.hover {
  background-color: var(--vkui--color_background_negative--hover);
}

.modePrimary.appearanceNegative.active {
  background-color: var(--vkui--color_background_negative--active);
}

.modePrimary.appearanceNeutral {
  background-color: var(--vkui--color_background_content_inverse);
}

.modePrimary.appearanceNeutral.hover {
  background-color: var(--vkui--color_background_content_inverse--hover);
}

.modePrimary.appearanceNeutral.active {
  background-color: var(--vkui--color_background_content_inverse--active);
}

.modePrimary.appearanceAccentInvariable {
  background-color: var(--vkui--color_background_accent);
}

.modePrimary.appearanceAccentInvariable.hover {
  background-color: var(--vkui--color_background_accent--hover);
}

.modePrimary.appearanceAccentInvariable.active {
  background-color: var(--vkui--color_background_accent--active);
}

/* Mode = Secondary */

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

.modeSecondary.hover {
  background-color: var(--vkui--color_background_secondary_alpha--hover);
}

.modeSecondary.active {
  background-color: var(--vkui--color_background_secondary_alpha--active);
}

/* Mode = Tertiary */

.modeTertiary,
.modeOutline {
  background-color: var(--vkui--color_transparent);
}

.modeTertiary.hover,
.modeOutline.hover {
  background-color: var(--vkui--color_transparent--hover);
}

.modeTertiary.active,
.modeOutline.active {
  background-color: var(--vkui--color_transparent--active);
}

/*
  Buttons text colors
*/

.appearanceAccent {
  color: var(--vkui--color_text_accent_themed);
}

.appearancePositive {
  color: var(--vkui--color_text_positive);
}

.appearanceNegative {
  color: var(--vkui--color_text_negative);
}

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

.modePrimary.appearanceNeutral {
  color: var(--vkui--color_text_contrast_themed);
}

.appearanceAccentInvariable {
  color: var(--vkui--color_text_accent);
}

.modePrimary.appearanceAccent {
  color: var(--vkui--color_text_contrast_themed);
}

.modePrimary.appearanceNegative,
.modePrimary.appearancePositive,
.modePrimary.appearanceAccentInvariable {
  color: var(--vkui--color_text_contrast);
}

.modeLink.hover {
  opacity: 0.8;
}

.modeLink.active {
  opacity: 0.7;
}

/*
  Outline buttons borders
*/

.modeOutline.appearanceAccent,
.modeOutline.appearanceAccent.hover,
.modeOutline.appearanceAccent.active {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_accent_themed);
}

.modeOutline.appearancePositive {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_positive);
}

.modeOutline.appearancePositive.hover {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_positive--hover);
}

.modeOutline.appearancePositive.active {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_positive--active);
}

.modeOutline.appearanceNegative {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_negative);
}

.modeOutline.appearanceNegative.hover {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_negative--hover);
}

.modeOutline.appearanceNegative.active {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_negative--active);
}

.modeOutline.appearanceNeutral {
  box-shadow: inset 0 0 0 1px var(--vkui--color_field_border_alpha);
}

.modeOutline.appearanceNeutral.hover {
  background-color: var(--vkui--color_background_secondary--hover);
  box-shadow: unset;
}

.modeOutline.appearanceNeutral.active {
  background-color: var(--vkui--color_background_secondary--active);
  box-shadow: unset;
}

.modeOutline.appearanceAccentInvariable {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_accent);
}

/*
  Overlay colors section, separately
  Background colors
*/

.modePrimary.appearanceOverlay {
  background-color: var(--vkui--color_background_contrast);
}

.modePrimary.appearanceOverlay.hover {
  background-color: var(--vkui--color_background_contrast--hover);
}

.modePrimary.appearanceOverlay.active {
  background-color: var(--vkui--color_background_contrast--active);
}

.modeSecondary.appearanceOverlay {
  background-color: var(--vkui--color_overlay_primary);
}

.modeSecondary.appearanceOverlay.hover {
  background-color: var(--vkui--color_overlay_primary--hover);
}

.modeSecondary.appearanceOverlay.active {
  background-color: var(--vkui--color_overlay_primary--active);
}

.modeTertiary.appearanceOverlay.hover,
.modeOutline.appearanceOverlay.hover {
  background-color: var(--vkui--color_background_contrast_secondary_alpha--hover);
}

.modeTertiary.appearanceOverlay.active,
.modeOutline.appearanceOverlay.active {
  background-color: var(--vkui--color_background_contrast_secondary_alpha--active);
}

/* Text colors */

.modePrimary.appearanceOverlay {
  color: var(--vkui--color_text_primary_invariably);
}

.modePrimary.appearanceOverlay.hover {
  color: var(--vkui--color_text_primary_invariably--hover);
}

.modePrimary.appearanceOverlay.active {
  color: var(--vkui--color_text_primary_invariably--active);
}

.modeSecondary.appearanceOverlay,
.modeTertiary.appearanceOverlay,
.modeOutline.appearanceOverlay,
.modeLink.appearanceOverlay {
  color: var(--vkui--color_text_contrast);
}

/* Borders */

.modeOutline.appearanceOverlay {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_contrast);
}

.modeOutline.appearanceOverlay.hover {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_contrast--hover);
}

.modeOutline.appearanceOverlay.active {
  box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_contrast--active);
}

.before:not(:last-child) + .content {
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
}

.after:not(:first-child) {
  -webkit-margin-start: 6px;
          margin-inline-start: 6px;
}

.sizeL .before:not(:last-child) + .content {
  -webkit-margin-start: 8px;
          margin-inline-start: 8px;
}

.sizeL .after:not(:first-child) {
  -webkit-margin-start: 8px;
          margin-inline-start: 8px;
}

/* Fonts sizes  */

.sizeS .content {
  font-family: var(--vkui--font_subhead--font_family--regular);
  font-size: var(--vkui--font_subhead--font_size--compact);
  line-height: var(--vkui--font_subhead--line_height--compact);
}

.sizeYRegular.sizeS .content {
  font-family: var(--vkui--font_subhead--font_family--regular);
  font-size: var(--vkui--font_subhead--font_size--regular);
  line-height: var(--vkui--font_subhead--line_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.sizeS .content {
    font-family: var(--vkui--font_subhead--font_family--regular);
    font-size: var(--vkui--font_subhead--font_size--regular);
    line-height: var(--vkui--font_subhead--line_height--regular);
  }
}

.sizeM .content {
  font-family: var(--vkui--font_headline2--font_family--regular);
  font-size: var(--vkui--font_headline2--font_size--compact);
  line-height: var(--vkui--font_headline2--line_height--compact);
}

.sizeYRegular.sizeM .content {
  font-family: var(--vkui--font_headline2--font_family--regular);
  font-size: var(--vkui--font_headline2--font_size--regular);
  line-height: var(--vkui--font_headline2--line_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.sizeM .content {
    font-family: var(--vkui--font_headline2--font_family--regular);
    font-size: var(--vkui--font_headline2--font_size--regular);
    line-height: var(--vkui--font_headline2--line_height--regular);
  }
}

.sizeL .content {
  font-family: var(--vkui--font_headline1--font_family--regular);
  font-size: var(--vkui--font_headline1--font_size--compact);
  line-height: var(--vkui--font_headline1--line_height--compact);
}

.sizeYRegular.sizeL .content {
  font-family: var(--vkui--font_headline1--font_family--regular);
  font-size: var(--vkui--font_headline1--font_size--regular);
  line-height: var(--vkui--font_headline1--line_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.sizeL .content {
    font-family: var(--vkui--font_headline1--font_family--regular);
    font-size: var(--vkui--font_headline1--font_size--regular);
    line-height: var(--vkui--font_headline1--line_height--regular);
  }
}

.sizeYRegular.sizeL.ios .content {
  font-family: var(--vkui--font_title3--font_family--regular);
  font-size: var(--vkui--font_title3--font_size--regular);
  line-height: var(--vkui--font_title3--line_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.sizeL.ios .content {
    font-family: var(--vkui--font_title3--font_family--regular);
    font-size: var(--vkui--font_title3--font_size--regular);
    line-height: var(--vkui--font_title3--line_height--regular);
  }
}

/* Sizes */

.sizeM {
  min-block-size: var(--vkui--size_button_medium_height--compact);
}

.sizeYRegular.sizeM {
  min-block-size: var(--vkui--size_button_medium_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.sizeM {
    min-block-size: var(--vkui--size_button_medium_height--regular);
  }
}

.sizeM.singleIcon {
  inline-size: var(--vkui--size_button_medium_height--compact);
}

.sizeYRegular.sizeM.singleIcon {
  inline-size: var(--vkui--size_button_medium_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.sizeM.singleIcon {
    inline-size: var(--vkui--size_button_medium_height--regular);
  }
}

.sizeL {
  min-block-size: var(--vkui--size_button_large_height--compact);
}

.sizeYRegular.sizeL {
  min-block-size: var(--vkui--size_button_large_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.sizeL {
    min-block-size: var(--vkui--size_button_large_height--regular);
  }
}

.sizeL.singleIcon {
  inline-size: var(--vkui--size_button_large_height--compact);
}

.sizeYRegular.sizeL.singleIcon {
  inline-size: var(--vkui--size_button_large_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone.sizeL.singleIcon {
    inline-size: var(--vkui--size_button_large_height--regular);
  }
}

.sizeYRegular {
  min-block-size: var(--vkui--size_button_small_height--regular);
}

@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
  .sizeYNone {
    min-block-size: var(--vkui--size_button_small_height--regular);
  }
}

/**
 * Impact:
 * Counter
 */

.modePrimary.appearanceAccent {
  --vkui_internal--counter_inherit_background: var(--vkui--color_background_content);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_accent_themed);
}

.modeSecondary.appearanceAccent,
.modeTertiary.appearanceAccent,
.modeOutline.appearanceAccent {
  --vkui_internal--counter_inherit_background: var(--vkui--color_background_accent_themed);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast_themed);
}

.modePrimary.appearancePositive {
  --vkui_internal--counter_inherit_background: var(--vkui--color_background_contrast);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_positive);
}

.modeSecondary.appearancePositive,
.modeTertiary.appearancePositive,
.modeOutline.appearancePositive {
  --vkui_internal--counter_inherit_background: var(--vkui--color_background_positive);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast);
}

.modePrimary.appearanceNegative {
  --vkui_internal--counter_inherit_background: var(--vkui--color_background_contrast);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_negative);
}

.modeSecondary.appearanceNegative,
.modeTertiary.appearanceNegative,
.modeOutline.appearanceNegative {
  --vkui_internal--counter_inherit_background: var(--vkui--color_background_negative);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast);
}

.modePrimary.appearanceNeutral {
  --vkui_internal--counter_inherit_background: var(--vkui--color_text_contrast_themed);
  --vkui_internal--counter_inherit_color: var(--vkui--color_background_content_inverse);
}

.modeSecondary.appearanceNeutral,
.modeTertiary.appearanceNeutral,
.modeOutline.appearanceNeutral {
  --vkui_internal--counter_inherit_background: var(--vkui--color_background_accent);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast);
}

.modePrimary.appearanceOverlay {
  --vkui_internal--counter_inherit_background: var(--vkui--color_icon_primary_invariably);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast);
}

.modeSecondary.appearanceOverlay,
.modeTertiary.appearanceOverlay,
.modeOutline.appearanceOverlay {
  --vkui_internal--counter_inherit_background: var(--vkui--color_background_contrast);
  --vkui_internal--counter_inherit_color: var(--vkui--color_text_primary_invariably);
}