@value inputBg, textDark, textLight, readOnlyBg, readOnlyBorder from '../colors.css';
@value activeEdgeWidth, inputHeight, inputMargin, multilineHeightMultiplier from '../dimensions.css';

.common {
  composes: common from './Input.css';
  position: relative;
  width: 100%;
  height: inputHeight;
  line-height: 18px;
  color: textDark;
  background-color: readOnlyBg;
}

.common :global(.ql-toolbar.ql-snow) {
  display: none;
}

.common.enabled {
  background-color: inputBg;
}

.normal {
  composes: common;
  margin-bottom: inputMargin;
}

.normal :global(.ql-editor) {
  outline-offset: -1px;
  border: 1px solid readOnlyBorder;
}

.normal.enabled :global(.ql-editor) {
  border-color: textLight;
}

.normal :global(.ql-toolbar.ql-snow) {
  top: -29px;
}

.embedded {
  composes: common;
}

.embedded :global(.ql-editor) {
  outline-offset: 0;
}

.embedded :global(.ql-toolbar.ql-snow) {
  top: -30px;
  left: -1px;
}

.focus :global(.ql-toolbar.ql-snow) {
  display: block;
}

.focus :global(.ql-editor) {
  outline: 2px solid rgb(70, 70, 70);
  position: relative;
  z-index: 2;
}

.multiline {
  height: calc(inputHeight * multilineHeightMultiplier);
}

.multiline.embedded {
  height: calc(inputHeight * multilineHeightMultiplier - 2px);
}