@st-namespace 'TextArea-st-css';
@st-import [ --wix-color-1, --wix-color-5, --wix-color-4, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ errorColor-rgb, successColor-rgb, focusRing ] from '../../common/palette.st.css';
@st-import [ createFont, createColor, setColor, setVar, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [
  --wst-primary-background-color-rgb,
  --wst-paragraph-2-color-rgb,
  --wst-shade-3-color-rgb,
  --wst-system-disabled-color-rgb,
  --wst-system-error-color-rgb,
  --wst-system-success-color-rgb
] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

@property st-global(--wut-error-color);

/*
 * The corner radius of the component
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-text-area-main-border-radius);

/*
 * The width of the component’s border
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-text-area-main-border-width);

/*
 * Container width
 * @type size
 * @playground {"max": 580}
 */
@property st-global(--wix-ui-tpa-text-area-container-width);

/*
 * Container height
 * @type size
 * @playground {"max": 290}
 */
@property st-global(--wix-ui-tpa-text-area-container-height);

/*
 * Border color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-text-area-border-color);

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-background-color);

/*
 * Color of value text
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-text-color);

/*
 * Color of value text when text area is disabled
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-disabled-text-color);

/*
 * Placeholder text color
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-placeholder-color);

/*
 * Text font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '16px', lineHeight: '1.5em'}
 */
@property st-global(--wix-ui-tpa-text-area-text-font);

/*
 * Border color in case of error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-text-area-error-border-color);

/*
 * Border color in case of success
 * @type color
 * @default #008250
 */
@property st-global(--wix-ui-tpa-text-area-success-border-color);

/*
 * Border color when text area is disabled
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-text-area-disabled-border-color);

/*
 * The font of the label
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-text-area-main-label-font);

/*
 * The color of the label.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-text-area-main-label-text-color);

/*
 * The color of the label when text area is disabled.
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-text-area-disabled-label-color);

/*
 * The font of the char count
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-text-area-char-count-font);

/*
 * The color of the char count
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-text-area-char-count-color);

/*
 * The color representing an error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-text-area-error-color);

/*
 * A minimum height for the error message element
 * @type size
 */
@property st-global(--wix-ui-tpa-text-area-error-message-min-height);


/*
 * Main border opacity
 * @type size
 * @default 0.6
 */
@property st-global(--wix-ui-tpa-text-area-main-border-opacity);

/*
 * The color of the component’s border when hovered
 * @type color
 * @default --wix-ui-tpa-text-area-border-color
 */
@property st-global(--wix-ui-tpa-text-area-hover-border-color);

/*
 * The width of the component’s border when hovered
 * @type size
 * @default --wix-ui-tpa-text-area-border-width
 */
@property st-global(--wix-ui-tpa-text-area-hover-border-width);

/*
 * The corner radius of the component when hovered
 * @type size
 * @default --wix-ui-tpa-text-area-main-border-radius
 */
@property st-global(--wix-ui-tpa-text-area-hover-border-radius);

/*
 * The corner radius of the component when hovered
 * @type color
 * @default --wix-ui-tpa-text-area-background-color
 */
@property st-global(--wix-ui-tpa-text-area-hover-background-color);

/*
 * The corner radius of the component when hovered
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-text-area-hover-background-opacity);

/*
 * The corner radius of the component when hovered
 * @type color
 * @default --wix-ui-tpa-text-area-main-label-text-color
 */
@property st-global(--wix-ui-tpa-text-area-hover-text-color);

/*
 * Horizontal paddings of the component
 * @type size
 * @default 12
 */
@property st-global(--wix-ui-tpa-text-area-horizontal-padding);

 /*
 * Vertical paddings of the component
 * @type size
 * @default 8
 */
@property st-global(--wix-ui-tpa-text-area-vertical-padding);

/*
 * The indent of component's input and placeholder
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-text-area-padding-inline-start);

.root {
    -st-states: theme(enum(line, box)), disabled, error, success, rtl, errorMessage, newErrorMessage, hasErrorMessage;
    width: var(--wix-ui-tpa-text-area-container-width, 280px);
    --default-main-border-width: 1px;
    --default-background-color: createColor(--wix-ui-tpa-text-area-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.root:error:newErrorMessage {
    -st-mixin:
        setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-text-area-error-color, var(--wst-system-error-color-rgb, value(errorColor-rgb))),
        setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-text-area-error-message-min-height);
}

.textAreaWrapper {
    -st-states: withResize;
    background-color: var(--default-background-color);
    box-sizing: border-box;
    display: flex;
    position: relative;
    height: var(--wix-ui-tpa-text-area-container-height, 92px);

    border-radius: var(--wix-ui-tpa-text-area-main-border-radius, 0);
    border-width: 0;
    border-color: createColor(--wix-ui-tpa-text-area-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-text-area-main-border-opacity, 0.6));
    border-style: solid;
}

.textAreaWrapper:withResize {
    overflow: hidden;
    resize: both;
}

.root:theme(box) .textAreaWrapper {
    border-width: var(--wix-ui-tpa-text-area-main-border-width, var(--default-main-border-width));
    padding: var(--wix-ui-tpa-text-area-vertical-padding, 8px) 0;
}

.root:theme(box) .textAreaWrapper:active,
.root:theme(box) .textAreaWrapper:hover,
.root:theme(box) .textAreaWrapper:focus,
.root:theme(box) .textAreaWrapper:focus-within {
    border-radius: var(--wix-ui-tpa-text-area-hover-border-radius, var(--wix-ui-tpa-text-area-main-border-radius));
    border-width: var(--wix-ui-tpa-text-area-hover-border-width, var(--wix-ui-tpa-text-area-main-border-width, var(--default-main-border-width)));
}

.root:theme(line) .textAreaWrapper {
    border-bottom-width: var(--wix-ui-tpa-text-area-main-border-width, var(--default-main-border-width));
    padding: 0;
}

.root:theme(line) .textAreaWrapper:active,
.root:theme(line) .textAreaWrapper:hover,
.root:theme(line) .textAreaWrapper:focus,
.root:theme(line) .textAreaWrapper:focus-within {
    border-bottom-width: var(--wix-ui-tpa-text-area-hover-border-width, var(--wix-ui-tpa-text-area-main-border-width, var(--default-main-border-width)));
    padding: 0;
}

.textAreaWrapper:active,
.textAreaWrapper:hover,
.textAreaWrapper:focus,
.textAreaWrapper:focus-within {
    border-color: createColor(--wix-ui-tpa-text-area-hover-border-color, var(--wix-ui-tpa-text-area-border-color, var(--wst-paragraph-2-color-rgb)));
    border-radius: var(--wix-ui-tpa-text-area-hover-border-radius, var(--wix-ui-tpa-text-area-main-border-radius));
    background-color: createColor((--wix-ui-tpa-text-area-hover-background-color, --default-background-color), transparent, var(--wix-ui-tpa-text-area-hover-background-opacity, 1));
}

.textAreaWrapper:active > textarea,
.textAreaWrapper:hover > textarea,
.textAreaWrapper:focus > textarea,
.textAreaWrapper:focus-within > textarea {
    color: createColor(--wix-ui-tpa-text-area-hover-text-color, var(--wix-ui-tpa-text-area-main-label-text-color, var(--wst-paragraph-2-color-rgb)));
}

.textArea {
    resize: none;
    border: none;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    color: createColor(--wix-ui-tpa-text-area-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    padding: 0 var(--wix-ui-tpa-text-area-horizontal-padding, 12px);
    padding-inline-start: var(--wix-ui-tpa-text-area-padding-inline-start, var(--wix-ui-tpa-text-area-horizontal-padding, 12px));
    overflow: hidden;
    background-color: transparent;
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5em", "size": "16px" }'),
    createFont((--wix-ui-tpa-text-area-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
    border-radius: var(--wix-ui-tpa-text-area-main-border-radius, 0);
}

.textArea:hover,
.textArea:focus {
    overflow: auto;
}

.textArea::placeholder,
.textArea::-webkit-input-placeholder {
    color: createColor(--wix-ui-tpa-text-area-placeholder-color, var(--wst-shade-3-color-rgb, var(--wix-color-4)));
}

.errorIconWrapper {
    height: 24px;
    position: absolute;
    display: flex;
    padding: 0 8px;
    box-sizing: border-box;
    top: 5px;
    width: 100%;
    justify-content: flex-end;
    pointer-events: none;
}

.root:theme(line) .errorIconWrapper {
    padding-inline-end: 0;
}

.iconTooltip {
    pointer-events: auto;
}

.root:theme(line) .iconTooltip {
    margin: 0 -4px;
}

.errorIcon {
    color: rgb(value(errorColor-rgb)) !important;
}

.root:theme(line) .textAreaWrapper .textArea {
    padding-left: 0;
    padding-right: 0;
}

.root:error:not(:newErrorMessage) .textAreaWrapper {
    border-color: createColor(--wix-ui-tpa-text-area-error-border-color, var(--wst-system-error-color-rgb, value(errorColor-rgb)), var(--wix-ui-tpa-text-area-main-border-opacity, 0.6)) !important;
}

.root:error:newErrorMessage .textAreaWrapper {
    border-color: var(--wut-error-color, rgb(value(errorColor-rgb))) !important;
}

.root:hover:error:not(:newErrorMessage) .textAreaWrapper,
.root:focus:error:not(:newErrorMessage) .textAreaWrapper {
    border-color: createColor(--wix-ui-tpa-text-area-error-border-color, var(--wst-system-error-color-rgb, value(errorColor-rgb))) !important;
}

.root:hover:error:newErrorMessage .textAreaWrapper,
.root:focus:error:newErrorMessage .textAreaWrapper {
    border-color: var(--wut-error-color, rgb(value(errorColor-rgb))) !important;
}

.root:error:errorMessage:not(:rtl) .textAreaWrapper .textArea {
    padding-right: 38px;
}

.root:error:errorMessage:rtl .textAreaWrapper .textArea {
    padding-left: 38px;
}

.root:success .textAreaWrapper {
    border-color: createColor(--wix-ui-tpa-text-area-success-border-color, var(--wst-system-success-color-rgb, value(successColor-rgb)), var(--wix-ui-tpa-text-area-main-border-opacity, 0.6));
}

.root:hover:success .textAreaWrapper,
.root:focus:success .textAreaWrapper {
    border-color: createColor(--wix-ui-tpa-text-area-success-border-color, var(--wst-system-success-color-rgb, value(successColor-rgb)));
}

.root:disabled .textAreaWrapper {
    border-color: createColor(--wix-ui-tpa-text-area-disabled-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root:disabled .textAreaWrapper:hover {
    border-color: createColor(--wix-ui-tpa-text-area-disabled-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root:disabled .textAreaWrapper .textArea {
    color: createColor(--wix-ui-tpa-text-area-disabled-text-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root .label {
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.4", "size": "14px" }'),
    createFont((--wix-ui-tpa-text-area-main-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
    color: createColor(--wix-ui-tpa-text-area-main-label-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    display: block;
    margin-bottom: 8px;
}

.root:disabled .label {
    color: createColor(--wix-ui-tpa-text-area-disabled-label-color, var(--wix-color-5));
}

.charCount {
    display: flex;
    justify-content: flex-end;
    -st-mixin: createFont(--wix-ui-tpa-text-area-char-count-font, 'Body-M', '{ "line-height": "1.4", "size": "14px" }');
    color: createColor(--wix-ui-tpa-text-area-char-count-color, var(--wst-shade-3-color-rgb, var(--wix-color-4)));
    margin-top: 8px;
}

.root:error:newErrorMessage:hasErrorMessage .charCount {
    margin-top: 0;
}

:global(#SITE_CONTAINER.focus-ring-active) .focused {
    -st-mixin: focusRing();
}

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