:root {
  --progressive-image-background-color: var(--sakura-color-divider);
  --progressive-image-blur: 16px;
  --progressive-image-fade-ease: cubic-bezier(0.39, 0.57, 0.56, 1);
  --progressive-image-fade-speed: 0.45s;
  --progressive-image-skeleton-speed: 1.85s;
  --progressive-image-skeleton-background: linear-gradient(
    90deg,
    oklch(100% 0 0 / 0%) 0%,
    oklch(100% 0 0 / 70%) 70%,
    oklch(100% 0 0 / 0%) 100%
  );
}

html.dark {
  --progressive-image-skeleton-background: linear-gradient(
    90deg,
    oklch(10% 0 0 / 0%) 0%,
    oklch(25% 0 0 / 70%) 70%,
    oklch(10% 0 0 / 0%) 100%
  );
}

.v-progressive-image,
.v-progressive-image *,
.v-progressive-image *::before,
.v-progressive-image *::after {
  box-sizing: border-box;
}

.v-progressive-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none !important;
  display: inline-block;
  background: var(--progressive-image-background-color);
}

.v-progressive-image-loading::before {
  content: '';
  display: block;
  position: absolute;
  background: var(--progressive-image-skeleton-background);
  height: 100%;
  width: 100%;
  z-index: 1;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .v-progressive-image-loading::before {
    animation: shimmer var(--progressive-image-skeleton-speed) infinite;
  }

  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(100%);
    }
  }
}

.v-progressive-image-main {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.v-progressive-image-placeholder {
  position: absolute;
  top: calc(var(--progressive-image-blur) * -1);
  left: calc(var(--progressive-image-blur) * -1);
  width: calc(100% + var(--progressive-image-blur) * 2);
  height: calc(100% + var(--progressive-image-blur) * 2);
  filter: blur(var(--progressive-image-blur));
  transform: scale(1.2);
  z-index: 1;
  object-fit: cover;
}

.v-progressive-image-slot-default {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.v-progressive-image-object-cover {
  height: 100%;
  width: 100%;
}

.v-progressive-image-object-cover .v-progressive-image-main {
  object-position: center;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.v-progressive-image-main-fade-leave-active,
.v-progressive-image-main-fade-enter-active,
// =============== placeholderSrc ===============
.v-progressive-image-placeholder-fade-leave-active,
.v-progressive-image-placeholder-fade-enter-active {
  transition:
    opacity var(--progressive-image-fade-speed)
      var(--progressive-image-fade-ease),
    filter calc(var(--progressive-image-fade-speed) * 1.85)
      var(--progressive-image-fade-ease);
}

.v-progressive-image-main-fade-leave-to,
.v-progressive-image-main-fade-enter-from,
// =============== placeholderSrc ===============
.v-progressive-image-placeholder-fade-leave-to,
.v-progressive-image-placeholder-fade-enter-from {
  filter: blur(8px);
  opacity: 0;
}