/**
 * Утилитарные классы на замену отдельному компоненту для имитации
 * :focus-visible состояния.
 */
.focusVisible {
  --vkui_internal--outline_width: 2px;
}
/* stylelint-disable selector-max-universal */
.focusVisible:focus,
.focusVisible:focus-visible,
.focusVisible *:focus,
.focusVisible *:focus-visible {
  outline: none;
}
/* stylelint-enable selector-max-universal */
.focusVisible.focusVisibleModeOutside {
  --vkui_internal--outline_offset_from: 0;
  --vkui_internal--outline_offset_to: var(--vkui_internal--outline_width);
}
.focusVisible.focusVisibleModeInside {
  --vkui_internal--outline_offset_from: calc(-2 * var(--vkui_internal--outline_width));
  --vkui_internal--outline_offset_to: calc(-1 * var(--vkui_internal--outline_width));
}
.focusVisible.focusVisibleFocused.focusVisibleModeInside,
.focusVisible.focusVisibleFocused.focusVisibleModeOutside {
  outline: var(--vkui_internal--outline);
  outline-offset: var(--vkui_internal--outline_offset_to);
  animation: animationOutlineOffset 0.1s ease-in-out 0.01s forwards;
}
@media screen and (prefers-reduced-motion: reduce) {
  .focusVisible.focusVisibleFocused.focusVisibleModeInside,
  .focusVisible.focusVisibleFocused.focusVisibleModeOutside {
    animation: none;
  }
}
@keyframes animationOutlineOffset {
  0% {
    outline-offset: var(--vkui_internal--outline_offset_from);
  }

  100% {
    outline-offset: var(--vkui_internal--outline_offset_to);
  }
}