@st-namespace 'Fieldset-st-css';
@st-import [ --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont ] from '../../../common/formatters.st';
@st-import [ errorColor-rgb ] from  '../../../common/palette.st.css';
@st-import [ fontFamily ] from '../../../common/fonts.st.css';

/*
 * Error message color
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-fieldset-error-color);
/*
 * The font of the label
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-fieldset-main-label-font);
/*
 * The color of the label. 60% opacity when disabled
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-fieldset-main-label-text-color);
/*
 * Space between input's bottom with the error. Used to prevent layout jumping when error message is shown.
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-fieldset-min-message-height);
/*
 * Space between label's bottom and the children.
 * @type size
 * @default 8px
 */
@property st-global(--wix-ui-tpa-fieldset-label-bottom-spacing);

.root {
  -st-states: error;
}

.root {
  --min-error-message-height: var(--wix-ui-tpa-fieldset-min-message-height, 0px);
  --error-min-height: 20px;
  --error-margin-top: 8px;

  border: none;
  padding: 0;
  margin: 0;
}

.root:not(:error) {
  margin-bottom: var(--min-error-message-height);
}
.root:error {
  margin-bottom: calc(var(--wix-ui-tpa-fieldset-min-message-height, 28px) - var(--error-min-height) - var(--error-margin-top));
}

.error {
  margin-top: var(--error-margin-top);
  min-height: var(--error-min-height);
  display: flex;
  align-items: center;
  color: createColor(--wix-ui-tpa-fieldset-error-color, value(errorColor-rgb));
  font-family: value(fontFamily);
  font-size: 14px;
  line-height: 1.4;
}

.errorIcon {
  margin-right: 2px;
}

.label {
  padding-bottom: var(--wix-ui-tpa-fieldset-label-bottom-spacing, 8px);
  padding-inline-start: 0;
  padding-inline-end: 0;
  -st-mixin: createFont(--wix-ui-tpa-fieldset-main-label-font, 'Body-M', '{ "line-height": "1.4", "size": "14px" }');
  color: createColor(--wix-ui-tpa-fieldset-main-label-text-color, var(--wix-color-5));
}

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