@st-namespace 'WowImage-deprecated-st-css';
@property st-global(--wut-source-width);
@property st-global(--wut-source-height);

:import {
  -st-from: "../../common/formatters.st";
  -st-named: color, fallback, applyOpacity;
}

:import {
    -st-from: "../../common/mixins.st.css";
    -st-named: sr-only;
}

:import {
  -st-from: "../Text/Text.deprecated.st.css";
  -st-default: TPAText;
}

:import {
  -st-from: "../Spinner/Spinner.deprecated.st.css";
  -st-default: Spinner;
}

/*Defaults*/
:vars {
  noImageBackgroundColor: applyOpacity(color(color-5), 0.2);
  defaultBorderWidth: 0px;
  defaultBorderRadius: 0px;
  defaultImageOpacity: 100%;
  errorBackgroundColor: color(color-2);
  errorTextColor: color(color-1);
  errorFontStyle: "{theme: 'Body-M', size:'14px', lineHeight: '1.5em'}";
}

/* Overrides */
:vars {
  /*
    A background color by a color from the palette for the container
  */
  BackgroundColor: --overridable;
  /*
    A border color by a color from the palette for the container
  */
  BorderColor: --overridable;
  /*
    A border width in pixels for the container
    @default 0px
  */
  BorderWidth: --overridable;
  /*
    A border radius in pixels for the container
    @default 0px
  */
  BorderRadius: --overridable;
  /*
    An opacity between 0 to 100 for the image
    @default 100%
  */
  ImageOpacity: --overridable;
}

/*
 * A background color by a color from the palette for the container
 * @type color
 */
@property st-global(--wix-ui-tpa-wow-image-background-color);

/*
 * A border color by a color from the palette for the container
 * @type color
 */
@property st-global(--wix-ui-tpa-wow-image-border-color);

/*
 * A border width in pixels for the container
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-wow-image-border-width);

/*
 * A border radius in pixels for the container
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-wow-image-border-radius);

/*
 * An opacity between 0 to 100 for the image
 * @type size
 * @default 100%
 */
@property st-global(--wix-ui-tpa-wow-image-image-opacity);

:vars {
  backgroundColor: color(value(BackgroundColor));
  backgroundColorNoImage: fallback(color(value(BackgroundColor)), value(noImageBackgroundColor));
  borderColor: color(value(BorderColor));
  borderWidth: fallback(value(BorderWidth), value(defaultBorderWidth));
  borderRadius: fallback(value(BorderRadius), value(defaultBorderRadius));
  imageOpacity: fallback(value(ImageOpacity), value(defaultImageOpacity));
}

.root {
  -st-states: focalPoint,
  fluid,
  hoverEffect(enum(zoom, darken)),
  loadSpinner,
  loaded,
  isError,
  stretchImage,
  resize(enum(cover, contain)),
  forceImageContain,
  verticalContainer,
  horizontalContainer,
  noImage;

  display: flex;
  height: 100%;
  position: relative;
}
.root:forceImageContain:resize(contain) {
  width: 100%;
}

.root:forceImageContain:resize(contain) > * {
  border: inherit;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.root:forceImageContain:resize(contain) img {
  max-height: 100%;
  max-width: 100%;
  width: unset !important;
  height: unset !important;
  border: inherit;
  border-radius: inherit;
}

.root:forceImageContain:resize(contain):verticalContainer img {
  width: min(var(--wut-source-width, 100%), 100%) !important;
}

.root:forceImageContain:resize(contain):horizontalContainer img {
  height: min(var(--wut-source-height, 100%), 100%) !important;

}

.root:noImage {
  background-color: value(noImageBackgroundColor);
}

.root img {
  vertical-align: middle;
}

.root:focalPoint img {
  object-position: var(--focalPointX, 0) var(--focalPointY, 0)
}

.root:resize(contain) .image {
  object-fit: contain;
}

.root:resize(cover) .image {
  object-fit: cover;
}

.root:fluid .image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.root:not(:stretchImage) {
  align-items: center;
}

.root:not(:stretchImage) .image,
.root:fluid:not(:stretchImage) .image {
  width: min(var(--wut-source-width, 100%), 100%);
  height: min(var(--wut-source-height, 100%), 100%);
  margin: 0 auto;
}

.root:hoverEffect(zoom) {
  overflow: hidden;
}

.root:hoverEffect(zoom) .image {
  overflow: initial;
  transition: all 500ms cubic-bezier(.18,.73,.63,1);
  transform: scale(calc(100 / 107)) translate(-3.5%, -3.5%);
}

.root:hoverEffect(zoom):hover .image {
  transform: scale(1) translate(-3.5%, -3.5%);
}

.root:hoverEffect(darken):hover .image {
  filter: brightness(85%) contrast(115%);
}

.root:not(:isError).overrideStyleParams {
  background-color: value(backgroundColor);
  border: value(borderWidth) solid value(borderColor);
  border-radius: value(borderRadius);
  overflow: hidden;
}

.root:not(:isError):noImage.overrideStyleParams {
  background-color: fallback(value(backgroundColorNoImage));
}

.root.overrideStyleParams .image {
  opacity: value(imageOpacity);
}

.root:isError {
  background-color: value(errorBackgroundColor);
  position: relative;
}

.root:isError img {
  display: none;
}

.root .errorWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  z-index: 1;
}

.errorMessage {
  -st-extends: TPAText;
  -st-mixin: TPAText(MainTextColor value(errorTextColor), MainTextFont value(errorFontStyle));
}

.srError {
  -st-mixin: sr-only();
}

.errorIcon {
  color: value(errorTextColor)
}

.spinnerOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.6);
}

.root:loadSpinner:not(:loaded) .spinnerOverlay {
  display: block;
}

.spinner {
  -st-extends: Spinner;
}

.spinner::circle {
  stroke: white;
}

/* st-namespace-reference="../../../../src/components/WowImage/WowImage.deprecated.st.css" */