{"version":3,"file":"chatComposer.module.mjs","names":[],"sources":["../../../../package/common/chatComposer/chatComposer.module.pcss"],"sourcesContent":[".chatComposer {\n  display: flex;\n  align-items: flex-end;\n  gap: 0.25em;\n  box-sizing: border-box;\n  padding: 0.375em;\n  border: 1px solid var(--border-color);\n  border-radius: calc(var(--default-border-radius) * 1.5);\n  background: var(--input-background);\n  color: var(--text-color);\n\n  &:focus-within {\n    border-color: var(--focus-border-color, var(--primary-color));\n  }\n\n  /* Once the text needs a second line, the field takes the whole width and the buttons a row\n     below it: beside it, a few of them would leave it too narrow to write in. Only the order\n     changes, never the element, so the focus and an IME composition survive the switch. */\n  &-stacked {\n    flex-wrap: wrap;\n  }\n\n  &-disabled {\n    background-color: var(--disabled-input-color);\n  }\n\n  /* As tall as one line of the field, so a smaller button centres on the first line rather than\n     sitting on the field's bottom edge. */\n  &-section {\n    display: flex;\n    flex: none;\n    align-items: center;\n    gap: 0.25em;\n    min-height: 2.25em;\n  }\n\n  &-input {\n    flex: 1 1 auto;\n    min-width: 0;\n    box-sizing: border-box;\n\n    /* Seven lines of line-height 1.5, plus the padding. */\n    max-height: 11.25em;\n    margin: 0;\n    padding: 0.375em 0.5em;\n    border: 0;\n    outline: none;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    line-height: 1.5;\n    resize: none;\n    overflow-y: auto;\n\n    &::placeholder {\n      color: var(--text-dark);\n    }\n\n    &:disabled {\n      color: var(--disabled-font-color);\n      -webkit-text-fill-color: var(--disabled-font-color);\n    }\n  }\n}\n\n.chatComposer-stacked .chatComposer-input {\n  flex-basis: 100%;\n  order: -1;\n}\n\n/* The end content, or the send button when there is none, and with it everything after: to the\n   far end of the row below. Two classes, as it can be the ActionIcon. */\n.chatComposer-stacked .chatComposer-input + * {\n  margin-inline-start: auto;\n}\n\n/* Two classes: it is an ActionIcon, whose own one-class rules it would otherwise tie with. As tall\n   as one line of the field, line-height plus padding, so the two line up while it is empty. */\n.chatComposer .chatComposer-button {\n  flex: none;\n  width: 2.25em;\n  height: 2.25em;\n  border-radius: 50%;\n}\n"],"mappings":""}