.ty-modal {
  position: relative;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  justify-content: center;
  top: var(--ty-modal-offset-top, 100px);
}
.ty-modal__content {
  box-sizing: border-box;
  background-color: var(--ty-modal-bg, var(--ty-color-bg-container));
  position: relative;
  background-clip: padding-box;
  border: 0;
  border-radius: var(--ty-modal-radius, 4px);
  box-shadow: var(--ty-modal-shadow, var(--ty-shadow-modal));
  transition: all var(--ty-modal-transition-duration, 300ms);
}
.ty-modal__content_slide-enter {
  transform: translateY(var(--ty-modal-enter-offset-y, -20px));
  transition: none;
}
.ty-modal__content_slide-enter-done {
  transform: translateY(0);
}
.ty-modal__content_slide-exit {
  transform: translateY(0);
}
.ty-modal__content_slide-exit-done {
  transform: translateY(var(--ty-modal-enter-offset-y, -20px));
}
.ty-modal__content_scale-enter {
  transform: scale(var(--ty-modal-scale-enter, 0));
  transition: none;
}
.ty-modal__content_scale-enter-done {
  transform: scale(1);
}
.ty-modal__content_scale-exit {
  transform: scale(1);
}
.ty-modal__content_scale-exit-done {
  transform: scale(var(--ty-modal-scale-enter, 0));
}
.ty-modal__header {
  box-sizing: border-box;
  padding: var(--ty-modal-header-padding-block, 16px) var(--ty-modal-header-padding-inline, 24px);
  color: var(--ty-modal-header-color, var(--ty-color-text-secondary));
  background: var(--ty-modal-header-bg, var(--ty-color-bg-container));
  border-bottom: 1px solid var(--ty-modal-header-border, var(--ty-color-border-secondary));
  border-radius: var(--ty-modal-radius, 4px) var(--ty-modal-radius, 4px) 0 0;
}
.ty-modal__title {
  margin: 0;
  color: var(--ty-modal-title-color, var(--ty-color-text));
  font-weight: var(--ty-modal-title-font-weight, 500);
  font-size: var(--ty-modal-title-font-size, 16px);
  line-height: var(--ty-modal-title-line-height, 22px);
}
.ty-modal__close-btn {
  cursor: pointer;
  color: var(--ty-modal-close-color, var(--ty-color-text-tertiary));
  width: var(--ty-modal-close-size, 56px);
  height: var(--ty-modal-close-size, 56px);
  line-height: var(--ty-modal-close-size, 56px);
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}
.ty-modal__body {
  box-sizing: border-box;
  padding: var(--ty-modal-body-padding, 24px);
  font-size: var(--ty-modal-body-font-size, 14px);
  line-height: var(--ty-modal-body-line-height, 1.5);
  word-wrap: break-word;
}
.ty-modal__footer {
  box-sizing: border-box;
  padding: var(--ty-modal-footer-padding-block, 12px) var(--ty-modal-footer-padding-inline, 16px);
  border-top: 1px solid var(--ty-modal-footer-border, var(--ty-color-border-secondary));
  border-radius: 0 0 var(--ty-modal-radius, 4px) var(--ty-modal-radius, 4px);
}
.ty-modal__footer-btn {
  margin-bottom: 0;
}
.ty-modal_centered {
  align-items: center;
  top: 0;
}