@property --rows;
@property --rowHeight;
@property --contentHeight;

:import {
    -st-from: '../Foundation/stylable/colors.st.css';
    -st-named: D80, B10, B30, B40, F00, B50, R10, R40, D40, R30, D10-30, D60, D70, Y10, Y40
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-small-normal, text-small-thin, text-medium-normal, text-medium-thin;
}

:import {
  -st-from: '../Foundation/stylable/default-scroll-bar.st.css';
  -st-named: defaultScrollBar;
}
.root {
  -st-states: disabled, readOnly, status(enum(error, warning)), size(enum(small, medium, large)), singleLine, newColorsBranding;
  --rows: 1;
  --rowHeight: 24px;
  --contentHeight: 6px;
  position: relative;
  text-align: left;
  background-color: value(D80);
  border-radius: 6px;
  width: 100%;
}
.root:size(small) {
  --rowHeight: 22px;
  --contentHeight: 8px;
}
.root:size(medium) {
  --rowHeight: 30px;
}
.root:size(large) {
  --rowHeight: 36px;
}
.root :global(.public-DraftEditorPlaceholder-root) {
  -st-mixin: text-medium-thin;
  color: value(D40);
  margin: 2px 0;
  position: absolute;
  pointer-events: none;
  top: 4px;
  left: 13px;
}

.root:size(small) :global(.public-DraftEditorPlaceholder-root) {
  -st-mixin: text-small-thin;
}

.root :global(.public-DraftEditor-content) {
  -st-mixin: defaultScrollBar; /* TODO: hide will not hovering  */
  background-color: value(D80);
  height: calc(var(--rows) * var(--rowHeight) + var(--contentHeight));
  padding: 3px 12px;
  border: 1px solid value(B30);
  border-radius: 6px;
  overflow: auto;
  box-sizing: border-box;
}

.root:newColorsBranding :global(.public-DraftEditor-content) {
  border: 1px solid value(B40);
}

.root:size(medium) :global(.public-DraftEditor-content) {
  padding: 2px 12px;
}

.root:size(large) :global(.public-DraftEditor-content) {
  padding: 2px 12px;
}

.root :global(.public-DraftEditor-content):hover {
  background-color: value(B50);
  cursor: pointer;
}
.root :global(.public-DraftEditor-content):focus {
  background-color: value(D80);
  cursor: text;
  border-color: value(B10);
  box-shadow: 0 0 0 3px value(F00);
}
.root:disabled :global(.public-DraftEditorPlaceholder-root) {
  color: value(D10-30);
}
.root:disabled :global(.public-DraftEditor-content) {
    color: value(D10-30);
    border-color: value(D60);
}
.root:disabled :global(.public-DraftEditor-content):hover {
  background-color: value(D80);
  cursor: default;
}
.root:readOnly:not(:disabled) :global(.public-DraftEditor-content) {
  background-color: value(D70);
  border-color: value(D60);
}
.root:hover:readOnly:not(:disabled) :global(.public-DraftEditor-content):not(:focus) {
  background-color: value(B50);
  border-color: value(B30);
}
.root:newColorsBranding:hover:readOnly:not(:disabled) :global(.public-DraftEditor-content):not(:focus) {
  border-color: value(B40);
}
.root .tagWrapper {
  padding-left: 2px;
  padding-right: 2px;
}

.root .textWrapper {
  -st-mixin: text-medium-thin;
  display: inline;
}

.root:size(small) .textWrapper {
  -st-mixin: text-small-thin;
}

.root :global(.public-DraftStyleDefault-block) {
  line-height: var(--rowHeight);
}

.root:status(error) :global(.public-DraftEditor-content) {
    border-color: value(R10);
}
.root:status(error) :global(.public-DraftEditor-content):focus {
    border-color: value(R10);
    box-shadow: 0 0 0 3px value(R30);
}
.root:newColorsBranding:status(error) :global(.public-DraftEditor-content):focus {
    box-shadow: 0 0 0 3px value(R40);
}

.root:status(warning) :global(.public-DraftEditor-content) {
  border-color: value(Y10);
}
.root:status(warning) :global(.public-DraftEditor-content):focus {
  border-color: value(Y10);
  box-shadow: 0 0 0 3px value(Y10);
}
.root:newColorsBranding:status(warning) :global(.public-DraftEditor-content):focus {
  box-shadow: 0 0 0 3px value(Y40);
}


.root .indicatorWrapper {
  position: absolute;
  top: 9px;
  right: 12px;
}

.root:size(small) .indicatorWrapper {
  top: 6px;
}


.root:singleLine :global(.public-DraftEditor-content) {
  overflow-x: auto;
  white-space: pre !important;
  -ms-overflow-style: none;
}
.root:singleLine :global(.public-DraftEditor-content)::-webkit-scrollbar {
   display: none;
 }

/* st-namespace-reference="../../../../src/VariableInput/VariableInput.st.css" */