import { form_control_styles_default } from "./chunk.2VV6AF6A.js"; import { component_styles_default } from "./chunk.K23QWHWK.js"; import { i } from "./chunk.CXZZ2LVK.js"; // src/components/textarea/textarea.styles.ts var textarea_styles_default = i` ${component_styles_default} ${form_control_styles_default} :host { display: block; } .textarea { display: flex; align-items: center; position: relative; width: 100%; font-family: var(--sl-input-font-family); font-weight: var(--sl-input-font-weight); line-height: var(--sl-line-height-normal); letter-spacing: var(--sl-input-letter-spacing); vertical-align: middle; transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) background-color; cursor: text; } /* Standard textareas */ .textarea--standard { background-color: var(--sl-input-background-color); border: solid var(--sl-input-border-width) var(--sl-input-border-color); } .textarea--standard:hover:not(.textarea--disabled) { background-color: var(--sl-input-background-color-hover); border-color: var(--sl-input-border-color-hover); } .textarea--standard:hover:not(.textarea--disabled) .textarea__control { color: var(--sl-input-color-hover); } .textarea--standard.textarea--focused:not(.textarea--disabled) { background-color: var(--sl-input-background-color-focus); border-color: var(--sl-input-border-color-focus); color: var(--sl-input-color-focus); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color); } .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control { color: var(--sl-input-color-focus); } .textarea--standard.textarea--disabled { background-color: var(--sl-input-background-color-disabled); border-color: var(--sl-input-border-color-disabled); opacity: 0.5; cursor: not-allowed; } .textarea--standard.textarea--disabled .textarea__control { color: var(--sl-input-color-disabled); } .textarea--standard.textarea--disabled .textarea__control::placeholder { color: var(--sl-input-placeholder-color-disabled); } /* Filled textareas */ .textarea--filled { border: none; background-color: var(--sl-input-filled-background-color); color: var(--sl-input-color); } .textarea--filled:hover:not(.textarea--disabled) { background-color: var(--sl-input-filled-background-color-hover); } .textarea--filled.textarea--focused:not(.textarea--disabled) { background-color: var(--sl-input-filled-background-color-focus); outline: var(--sl-focus-ring); outline-offset: var(--sl-focus-ring-offset); } .textarea--filled.textarea--disabled { background-color: var(--sl-input-filled-background-color-disabled); opacity: 0.5; cursor: not-allowed; } .textarea__control { flex: 1 1 auto; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: 1.4; color: var(--sl-input-color); border: none; background: none; box-shadow: none; cursor: inherit; -webkit-appearance: none; } .textarea__control::-webkit-search-decoration, .textarea__control::-webkit-search-cancel-button, .textarea__control::-webkit-search-results-button, .textarea__control::-webkit-search-results-decoration { -webkit-appearance: none; } .textarea__control::placeholder { color: var(--sl-input-placeholder-color); user-select: none; -webkit-user-select: none; } .textarea__control:focus { outline: none; } /* * Size modifiers */ .textarea--small { border-radius: var(--sl-input-border-radius-small); font-size: var(--sl-input-font-size-small); } .textarea--small .textarea__control { padding: 0.5em var(--sl-input-spacing-small); } .textarea--medium { border-radius: var(--sl-input-border-radius-medium); font-size: var(--sl-input-font-size-medium); } .textarea--medium .textarea__control { padding: 0.5em var(--sl-input-spacing-medium); } .textarea--large { border-radius: var(--sl-input-border-radius-large); font-size: var(--sl-input-font-size-large); } .textarea--large .textarea__control { padding: 0.5em var(--sl-input-spacing-large); } /* * Resize types */ .textarea--resize-none .textarea__control { resize: none; } .textarea--resize-vertical .textarea__control { resize: vertical; } .textarea--resize-auto .textarea__control { height: auto; resize: none; overflow-y: hidden; } `; export { textarea_styles_default };