@st-namespace 'WowImage-st-css';
@st-import [ --wix-color-5, --wix-color-2 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, setFont, setColor ] from '../../common/formatters.st';
@st-import [ sr-only ] from '../../common/mixins.st.css';
@st-import Text from '../Text/Text.st.css';
@st-import Spinner from '../Spinner/Spinner.st.css';

@property st-global(--wut-source-width);
@property st-global(--wut-source-height);

/*
 * 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 1
 */
@property st-global(--wix-ui-tpa-wow-image-image-opacity);

.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;
  --transparent: 0, 0, 0, 0;
  --errorTextColor: 255, 255, 255;
}

.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: rgb(var(--wix-color-5), 0.2);
}

.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) {
  background-color: createColor(--wix-ui-tpa-wow-image-background-color, var(--transparent));
  border: var(--wix-ui-tpa-wow-image-border-width, 0px) solid createColor(--wix-ui-tpa-wow-image-border-color, var(--transparent));
  border-radius: var(--wix-ui-tpa-wow-image-border-radius, 0px);
  overflow: hidden;
}

.root:not(:isError):noImage {
  background-color: createColor(--wix-ui-tpa-wow-image-background-color, (var(--wix-color-5), 0.2));
}

.root .image {
  opacity: var(--wix-ui-tpa-wow-image-image-opacity, 1);
}

.root:isError {
  background-color: rgb(var(--wix-color-2));
  position: relative;
}

.root:isError img {
  display: none;
}

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

.errorMessage {
  -st-extends: Text;
  -st-mixin:
    setColor(--wix-ui-tpa-text-main-text-color, null, var(--errorTextColor)),
    setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-picker-font-style, 'Body-M', '{ "size": "14px", "line-height": "1.5em" }');
}

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

.errorIcon {
  color: rgb(var(--errorTextColor));
}

.spinnerOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgb(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.st.css" */