@import "../../helpers";

.sf-image--wrapper {
  position: relative;
  display: inline-block;

  &:hover {
    --image-overlay-opacity: 1;
  }
}

.sf-image {
  object-fit: cover;
  width: var(--image-width);
  height: var(--image-height, auto);
  display: flex;

  &:not(.sf-image-loaded) {
    opacity: 0;
    position: absolute;
  }

  &:not([alt]),
  &[alt=""] {
    outline-color: red;
    outline-width: 1px;
    outline-style: dashed;
  }
}

.sf-image--placeholder {
  display: inline-block;
}

.sf-image--overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--image-overlay-padding);
  background: var(--image-overlay-background, rgba(var(--c-dark-base), 0.6));
  color: var(--image-overlay-color, var(--c-white));
  opacity: var(--image-overlay-opacity, 0);
  transition: opacity 150ms ease-in-out;
  font-family: var(--font-family--secondary);
  font-weight: var(--font-weight--light);
}