.host {
  margin-inline: auto;
}

.host:focus {
  outline: none;
}

.hostMaxWidthS {
  max-inline-size: 400px;
}

.hostMaxWidthM {
  max-inline-size: 414px;
}

.hostMaxWidthL {
  max-inline-size: 440px;
}

/* Mobile */

.hostMobile {
  --vkui_internal_ModalCard--translateY: 100%;
  --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
  --vkui_internal_ModalCard--insetBlockEnd: calc(
    var(--vkui--spacing_size_m) +
    var(--vkui_internal_ModalCard--safeAreaInsetBottom)
  );

  position: absolute;
  /*
   * Используем inset вместо padding, чтобы срабатывала логика с закрытие с Click Outside.
   * Для этого также нужны `inline-size: auto` и `margin-inline: auto`.
   */
  inset-block-end: var(--vkui_internal_ModalCard--insetBlockEnd);
  inset-inline: var(--vkui--spacing_size_m);
  box-sizing: border-box;
  inline-size: auto;
  transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
  transition: transform 0.4s var(--vkui_internal--spring-easing);
}

.hostMobile.hostStateEnter {
  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--insetBlockEnd)), 0);
  transition: none;
}

.hostMobile.hostStateEntering {
  transition: transform 0.5s var(--vkui_internal--slide-easing) 0.2s;
}

.hostMobile.hostStateExiting {
  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--insetBlockEnd)), 0);
  transition: transform 0.2s ease;
}

.hostMobile.hostStateExited {
  transform: translate3d(0, calc(100% + var(--vkui_internal_ModalCard--insetBlockEnd)), 0);
  transition: none;
}

/* Desktop */

.hostDesktop {
  box-sizing: content-box;
  inline-size: 100%;
  margin-block: auto;
  opacity: 1;
  transition: opacity 340ms var(--vkui--animation_easing_platform);
}

.hostDesktop.hostStateEnter {
  opacity: 0;
  transition-property: none;
}

.hostDesktop.hostStateEntering {
  opacity: 1;
}

.hostDesktop.hostStateExiting {
  opacity: 0;
}

.hostDesktop.hostStateExited {
  opacity: 0;
}