.host {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: var(--vkui_internal--tabbar_height);
  padding: 0;
  color: var(--vkui--color_tabbar_text_inactive);
  text-decoration: none;
  outline: var(--vkui_internal--outline-reset);
  background: transparent;
  border: 0;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalTabbar) .host {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
}

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

.tappable {
  position: absolute;
}

.in {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  padding-block: 4px 2px;
  padding-inline: 2px;
  overflow: hidden;
  pointer-events: none;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalTabbar--layout-vertical) .in {
  flex-direction: column;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalTabbar--layout-horizontal) .in {
  flex-direction: row;
}

.icon {
  position: relative;
  color: var(--vkui--color_icon_secondary);
}

.selected .icon {
  color: var(--vkui--color_icon_accent_themed);
}

.label {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalTabbar--layout-vertical) .label {
  --vkui--font_footnote--font_size--regular: 10px;
  --vkui--font_footnote--line_height--regular: 12px;

  margin-block-start: 2px;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalTabbar--layout-horizontal) .label {
  margin-inline-start: 8px;
}

/**
 * Android
 */

.android .tappable {
  inline-size: calc(100% + 16px);
  padding-block-end: calc(100% + 16px);
  border-radius: 50%;
}

.android:first-child {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.android:last-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/**
 * iOS
 */

.ios .tappable {
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
}

.ios .in {
  transition: transform 0.07s var(--vkui--animation_easing_platform);
}

.ios .tappableActive + .in {
  transform: scale(0.96);
}