.host {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  align-items: center;
  inline-size: 100%;
  padding: var(--vkui--spacing_size_m);
  margin: 0;
  font-family: var(--vkui--font_caption1--font_family--regular);
  font-size: var(--vkui--font_caption1--font_size--regular);
  line-height: var(--vkui--font_caption1--line_height--regular);
  text-decoration: none;
  border: 0;
  border-radius: var(--vkui--size_border_radius_paper--regular);
}

.withFakeEndIcon {
  -webkit-padding-end: var(--vkui--spacing_size_xl);
          padding-inline-end: var(--vkui--spacing_size_xl);
}

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

.sizeYRegular {
  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 {
    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);
  }
}

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

/* ToolButton's directions */

.directionRow {
  flex-direction: row;
  justify-content: flex-start;
}

.directionColumn {
  flex-direction: column;
  justify-content: center;
}

.directionRow .text {
  -webkit-margin-start: 4px;
          margin-inline-start: 4px;
}

.directionColumn .text {
  -webkit-margin-before: 4px;
          margin-block-start: 4px;
}

/* ToolButton'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.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);
}

/* Mode = Secondary */

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

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

.modeSecondary.active {
  background-color: var(--vkui--color_background_secondary--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);
}

/*
  ToolButtons text colors
*/

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

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

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

/*
  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.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;
}