.l-image-viewer__img-error {
  height: 440px;
  width: 440px;
  background-color: var(--td-bg-color-component-disabled);
  border-radius: 4px;
  color: #000000;
  cursor: inherit;
  position: absolute;
}
.l-image-viewer__img-error .l-image-viewer__img-error-content {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  font: var(--td-font-body-medium);
}
.l-image-viewer__img-error .l-image-viewer__img-error-content .l-image-viewer__img-error-text {
  margin-top: var(--td-comp-margin-s);
}
@keyframes modal-image-show {
  0% {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes modal-image-hide {
  0% {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
@keyframes modal-mask-show {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-mask-hide {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.l-image-viewer-preview-image {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  overflow: hidden;
  animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show;
}
.l-image-viewer-preview-image.l-is-hide {
  animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide;
}
.l-image-viewer-preview-image.l-is-hide .l-image-viewer__modal-pic .l-image-viewer__modal-box {
  animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide;
}
.l-image-viewer-preview-image .l-image-viewer__modal-index {
  text-align: center;
  font-size: var(--td-font-size-body-medium);
  color: var(--td-text-color-anti);
  position: absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--td-radius-default);
  padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);
  z-index: 1;
}
.l-image-viewer-preview-image .l-image-viewer__modal-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--td-mask-active);
  height: 100%;
  width: 100%;
  transition: all 0.2s ease;
  opacity: 1;
}
.l-image-viewer-preview-image .l-image-viewer__modal-pic {
  height: 0;
  width: 0;
  position: absolute;
  top: 50%;
  left: 50%;
}
.l-image-viewer-preview-image .l-image-viewer__modal-pic .l-image-viewer__modal-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show;
}
.l-image-viewer-preview-image .l-image-viewer__modal-pic .l-image-viewer__modal-box .l-image-viewer__modal-image {
  display: block;
  max-width: min(90vw, 1000px);
  max-height: min(90vh, 800px);
  transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  transform: rotate(0deg);
  object-fit: contain;
}
.l-image-viewer-preview-image .l-image-viewer__modal-header {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--td-bg-color-container);
  padding: 0 0 12px 0;
}
.l-image-viewer-preview-image .l-image-viewer__modal-header.l-is-show {
  padding: 12px 0;
}
@keyframes preview-icon-range {
  0% {
    transform: translate(-50%, 50%) rotateZ(0);
  }
  to {
    transform: translate(-50%, 50%) rotateZ(-180deg);
  }
}
@keyframes preview-icon-unrange {
  0% {
    transform: translate(-50%, 50%) rotateZ(-180deg);
  }
  to {
    transform: translate(-50%, 50%) rotateZ(0);
  }
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-pre-bt {
  width: var(--td-comp-size-xxs);
  height: var(--td-comp-size-xxs);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  background-color: var(--td-bg-color-container);
  color: var(--td-text-color-primary);
  border-radius: 50%;
  box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
  animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange;
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-pre-bt .l-icon {
  font-size: var(--td-font-size-body-large);
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-pre-bt:hover {
  background-color: inherit;
}
@keyframes preview-image-show {
  0% {
    height: 0;
  }
  to {
    height: 40px;
  }
}
@keyframes preview-image-hide {
  0% {
    height: 40px;
  }
  to {
    height: 0;
  }
}
.l-image-viewer-preview-image .l-image-viewer__modal-header.l-is-show .l-image-viewer__header-prev {
  animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show;
}
.l-image-viewer-preview-image .l-image-viewer__modal-header.l-is-show .l-image-viewer__header-pre-bt {
  animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range;
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev {
  width: calc(40px / 9 * 16 * 7 + 4px * 6);
  animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide;
  display: flex;
  position: relative;
  overflow: hidden;
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev::before,
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev::after {
  content: "";
  position: absolute;
  height: 100%;
  z-index: 1;
  width: calc(40px / 9 * 16);
  pointer-events: none;
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev::before {
  left: 0;
  background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0));
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev::after {
  right: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container));
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev .l-image-viewer__header-trans {
  height: 100%;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: calc(40px / 9 * 16 * 3 + 4px * 3);
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev .l-image-viewer__header-trans .l-image-viewer__header-box {
  box-sizing: border-box;
  width: calc(40px / 9 * 16);
  height: 40px;
  transition: 0.2s;
  overflow: hidden;
  border-radius: var(--td-radius-default);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background-color: var(--td-bg-color-secondarycontainer);
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev .l-image-viewer__header-trans .l-image-viewer__header-box .l-image-viewer__header-img {
  width: auto;
  height: 100%;
}
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev .l-image-viewer__header-trans .l-image-viewer__header-box:hover,
.l-image-viewer-preview-image .l-image-viewer__modal-header .l-image-viewer__header-prev .l-image-viewer__header-trans .l-image-viewer__header-box.l-is-active {
  border-color: var(--td-brand-color);
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon {
  cursor: pointer;
  color: var(--td-text-color-primary);
  border-radius: var(--td-radius-default);
  transition: 0.2s;
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-image-viewer__modal-close-bt {
  top: 100px;
  right: 40px;
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-image-viewer__modal-next-bt,
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-image-viewer__modal-prev-bt {
  top: 50%;
  transform: translateY(-50%);
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-image-viewer__modal-prev-bt {
  left: 40px;
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-image-viewer__modal-next-bt {
  right: 40px;
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-image-viewer__modal-close-bt,
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-image-viewer__modal-prev-bt,
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-image-viewer__modal-next-bt {
  position: fixed;
  z-index: 10;
  color: var(--td-text-color-anti);
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  width: var(--td-comp-size-xl);
  height: var(--td-comp-size-xl);
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon .l-image-viewer__modal-icon-label {
  margin-left: 2px;
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-is-disabled {
  color: rgba(255, 255, 255, 0.22);
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon.l-is-disabled:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
.l-image-viewer-preview-image .l-image-viewer__modal-icon:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.l-image-viewer__mask {
  width: 100vh;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 99;
  position: fixed;
  background-color: transparent;
}
.l-image-viewer__utils {
  width: 100%;
  position: absolute;
  bottom: 32px;
  z-index: 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--td-text-color-primary);
  user-select: none;
}
.l-image-viewer__utils .l-image-viewer__utils-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  line-height: 100%;
  background: var(--td-bg-color-container);
  border-radius: var(--td-radius-medium);
  padding: 0 var(--td-comp-paddingLR-xs);
}
.l-image-viewer__utils .l-image-viewer__utils-content .l-image-viewer__modal-icon {
  margin: 0 var(--td-comp-margin-xs);
  width: var(--td-comp-size-m);
  height: var(--td-comp-size-m);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--td-radius-default);
  transition: 0.2s;
}
.l-image-viewer__utils .l-image-viewer__utils-content .l-image-viewer__modal-icon:hover {
  background-color: var(--td-bg-color-container-hover);
}
.l-image-viewer__utils .l-image-viewer__utils-content .l-image-viewer__utils-scale {
  width: var(--td-comp-size-xl);
  text-align: center;
  cursor: inherit;
}
.l-image-viewer__utils .l-image-viewer__utils-content .l-image-viewer__utils-scale:hover {
  background-color: var(--td-bg-color-container);
}
.l-image-viewer-mini__footer .l-image-viewer__utils {
  position: inherit;
}
.l-image-viewer-mini__content {
  max-width: min(90vw, 1000px);
  max-height: min(90vh, 800px);
}
@keyframes modal-image-show {
  0% {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.l-image-viewer-mini__content .l-image-viewer__modal-pic .l-image-viewer__modal-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-image-viewer-mini__content .l-image-viewer__modal-pic .l-image-viewer__modal-box .l-image-viewer__modal-image {
  display: block;
  max-width: min(80vw, 800px);
  max-height: min(80vh, 600px);
  transition: all 0.2s ease;
  transform: rotate(0deg);
  object-fit: contain;
}
.l-image-viewer__dialog.l-dialog__ctx--fixed {
  z-index: 3000;
}
.l-image-viewer__dialog .l-dialog__header {
  padding: 0 var(--td-comp-paddingLR-s);
  pointer-events: none;
}
.l-image-viewer__dialog .l-dialog__header .l-image-viewer__dialog-title {
  pointer-events: all;
}
.l-image-viewer__dialog .l-dialog__header .l-dialog__close {
  pointer-events: auto;
}
.l-image-viewer__dialog .l-dialog {
  border-color: var(--td-component-border);
  overflow: hidden;
  padding: 0;
  box-shadow: var(--td-shadow-3);
}
.l-image-viewer__dialog .l-dialog__header {
  height: 40px;
  width: 100%;
  font-size: var(--td-font-size-body-medium);
  background-color: var(--td-bg-color-secondarycontainer);
}
.l-image-viewer__dialog .l-dialog__header-content {
  margin-left: 32px;
  justify-content: center;
}
.l-image-viewer__dialog .l-dialog__close:hover {
  background-color: var(--td-bg-color-secondarycontainer-hover);
}
