:where(.fs-block-image) {
  --fs-width: auto;
  --fs-height: auto;
  --border-radius: 0px;
  --overlay: transparent;
  --focal-point: center;
}

.fs-block-image {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--border-radius);

  .fs-block-video-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  :where(.fs-block-slider__container) > & {
    align-self: stretch;
  }

  :where(.fs-block-banner__layers) > & {
    --fs-x: -50%;
    --fs-y: -50%;
    --fs-inset: 50% auto auto 50%;
    --width: var(--fs-width, 100%);

    inset: var(--fs-inset);
  }
}

:where(.fs-block-image.is-video) {
  --overlay: rgba(0, 0, 0, 0.2);
}

.fs-block-image__media {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  width: var(--fs-width);
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
  border-radius: var(--border-radius);
  corner-shape: inherit;

  + .fs-block-caption {
    margin-block-start: var(--fs-blocks-spacing-xs);
  }
}

button.fs-block-image__media {
  cursor: zoom-in;
}

.fs-block-image__img {
  position: relative;
  display: block;
  margin-inline: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  width: var(--fs-width);
  height: var(--fs-height);
  object-fit: cover;
  object-position: var(--focal-point);
}

.fs-block-image__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  pointer-events: none;
}

.fs-block-image__figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  overflow-y: auto;
  padding-block: var(--wp--preset--spacing--xs);
  padding-inline: clamp(var(--wp--preset--spacing--sm), var(--border-radius), 50cqh);
  max-height: 100%;
  font-size: var(--wp--preset--font-size--small);
  color: var(--fs-blocks-color-white);
  background-color: rgba(0, 0, 0, 0.3);
}

.has-caption-hover .fs-block-image__figcaption {
  translate: 0 100%;
  transition: translate var(--fs-hover-duration, var(--fs-blocks-duration)) var(--fs-hover-timing-function, var(--fs-blocks-ease));
}

.has-caption-hover:hover .fs-block-image__figcaption {
  translate: 0 0;
}

:where(.fs-block-image.has-hover, .fs-image.has-hover) {
  --fs-hover-duration: var(--fs-blocks-duration);
  --fs-hover-timing-function: var(--fs-blocks-ease);
  --fs-hover-scale-from: 1;
  --fs-hover-scale-to: 1;
  --fs-hover-scale-blur: 0;
  --fs-hover-scale-duration: var(--fs-hover-duration);
  --fs-hover-blur-from: 0;
  --fs-hover-blur-to: 0;
  --fs-hover-opacity-from: 1;
  --fs-hover-opacity-to: 1;
  --fs-hover-grayscale-from: 0;
  --fs-hover-grayscale-to: 0;
  --fs-hover-brightness-from: 1;
  --fs-hover-brightness-to: 1;
  --fs-hover-overlay-from: 1;
  --fs-hover-overlay-to: 1;

  /* Fixes flickering on the edges when animating the image */
  will-change: contents;

  .fs-block-image__img,
  .fs-image__img {
    --fs-hover-scale: var(--fs-hover-scale-from);
    scale: var(--fs-hover-scale);
    opacity: var(--fs-hover-opacity-from);
    filter: blur(var(--fs-hover-blur-from)) grayscale(var(--fs-hover-grayscale-from)) brightness(var(--fs-hover-brightness-from));
    transition-property: --fs-hover-scale, opacity, filter;
    transition-duration: var(--fs-hover-scale-duration), var(--fs-hover-duration), var(--fs-hover-duration);
    transition-timing-function: var(--fs-hover-timing-function);
  }

  .fs-block-image__overlay,
  .fs-image__overlay {
    opacity: var(--fs-hover-overlay-from);
    transition-property: opacity;
    transition-duration: var(--fs-hover-duration);
    transition-timing-function: var(--fs-hover-timing-function);
  }

  &.with-hover-zoom-in {
    --fs-hover-scale-to: 1.1;
  }

  &.with-hover-zoom-in-long {
    --fs-hover-scale-to: 1.3;
  }

  &.with-hover-zoom-out {
    --fs-hover-scale-from: 1.1;
  }

  &.with-hover-zoom-out-long {
    --fs-hover-scale-from: 1.3;
  }

  &.with-hover-zoom-in-long,
  &.with-hover-zoom-out-long {
    --fs-hover-scale-duration: calc(var(--fs-blocks-duration) * 16.667); /* ~5s */
  }

  &.with-hover-fade-in {
    --fs-hover-opacity-from: 0.7;
  }

  &.with-hover-fade-out {
    --fs-hover-opacity-to: 0.7;
  }

  &.with-hover-color-add {
    --fs-hover-grayscale-from: 1;
    --fs-hover-grayscale-to: 0;
  }

  &.with-hover-color-remove {
    --fs-hover-grayscale-from: 0;
    --fs-hover-grayscale-to: 1;
  }

  &.with-hover-overlay-show {
    --fs-hover-overlay-from: 0;
    --fs-hover-overlay-to: 1;
  }

  &.with-hover-overlay-show-50 {
    --fs-hover-overlay-from: 0;
    --fs-hover-overlay-to: 0.5;
  }

  &.with-hover-overlay-hide {
    --fs-hover-overlay-from: 1;
    --fs-hover-overlay-to: 0;
  }

  &.with-hover-overlay-hide-50 {
    --fs-hover-overlay-from: 1;
    --fs-hover-overlay-to: 0.5;
  }

  &.with-hover-blur {
    --fs-hover-blur-to: 5px;
    --fs-hover-scale-blur: 0.02;
  }

  &.with-hover-glow {
    --fs-hover-brightness-to: 1.1;
  }
}

:where(.fs-group-hover:hover .fs-block-image.has-hover, .fs-block-image.has-hover:hover, .fs-image.has-hover:hover) {

  .fs-block-image__img,
  .fs-image__img {
    --fs-hover-scale: calc(var(--fs-hover-scale-to) + var(--fs-hover-scale-blur));
    opacity: var(--fs-hover-opacity-to);
    filter: blur(var(--fs-hover-blur-to)) grayscale(var(--fs-hover-grayscale-to)) brightness(var(--fs-hover-brightness-to));
  }

  .fs-block-image__overlay,
  .fs-image__overlay {
    opacity: var(--fs-hover-overlay-to);
  }
}

@property --fs-hover-scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}