@st-namespace 'ErrorMessageWrapper-deprecated-st-css';
@property st-global(--wut-error-color);

:import {
  -st-from: '../../../common/formatters.st';
  -st-named: color, font, unit, fallback, calculate;
}

:import {
  -st-from: '../../../common/fonts.st.css';
  -st-named: fontFamily;
}

:import {
  -st-from: "../../../common/palette.st.css";
  -st-named: errorColor as paletteErrorColor;
}

/* Defaults */
:vars {
  DefaultErrorColor: value(paletteErrorColor);
  DefaultMinMessageHeight: 0;
}

/* Overrides */
:vars {
  ErrorColor: --overridable;
  MinMessageHeight: --overridable;
}

/*
 * Error color
 * @type color
 */
@property st-global(--wix-ui-tpa-error-message-wrapper-error-color);

/*
 * Message height
 * @type size
 */
@property st-global(--wix-ui-tpa-error-message-wrapper-min-message-height);

:vars {
  errorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
  fixedMinHeight: 20px;
  fixedMarginTop: 8px;
}

.root {
  -st-states: visible;
  --wut-error-color: value(errorColor);
}

.root:not(:visible) {
  /* Spacing from the bottom using the provided minMessageHeight in case there is no error */
  margin-bottom: value(MinMessageHeight);
}

.root:visible {
  /* Calculating the missing spacing by the provided minMessageHeight since the message already sets minHeight and marginTop  */
  margin-bottom: calculate("-", value(MinMessageHeight), value(fixedMinHeight), value(fixedMarginTop));
}

.message {
  display: flex;
  align-items: flex-start;
  color: value(errorColor);
  font-family: value(fontFamily);
  font-size: 14px;
  line-height: 1.4;
  min-height: value(fixedMinHeight);
  margin-top: value(fixedMarginTop);
}

.icon {
  margin-inline-end: 2px;
  /* Prevents from the SVG being scaled down when having multiple rows */
  flex-shrink: 0;
}

.messageWithSuffix {
  display: flex;
  justify-content: space-between;
  margin-top: value(fixedMarginTop);
}

.messageWithSuffix .message {
  margin-top: 0;
  margin-inline-end: 12px;
}

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