:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

.form-control .form-control__label {
  display: none;
}
.form-control .form-control__help-text {
  display: none;
}

.form-control--has-label .form-control__label {
  display: inline-block;
  color: var(--sl-input-label-color);
  margin-bottom: var(--sl-spacing-xx-small);
}
.form-control--has-label.form-control--small .form-control__label {
  font-size: var(--sl-input-label-font-size-small);
}
.form-control--has-label.form-control--medium .form-control__label {
  font-size: var(--sl-input-label-font-size-medium);
}
.form-control--has-label.form-control--large .form-control_label {
  font-size: var(--sl-input-label-font-size-large);
}

.form-control--has-help-text .form-control__help-text {
  display: block;
  color: var(--sl-input-help-text-color);
}
.form-control--has-help-text .form-control__help-text ::slotted(*) {
  margin-top: var(--sl-spacing-xxx-small);
}
.form-control--has-help-text.form-control--small .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-small);
}
.form-control--has-help-text.form-control--medium .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-medium);
}
.form-control--has-help-text.form-control--large .form-control__help-text {
  font-size: var(--sl-input-help-text-font-size-large);
}

.form-control--has-error-text .form-control__help-text {
  display: none;
}
.form-control--has-error-text .form-control__input > .input[part=base],
.form-control--has-error-text .form-control__input > .select *[part=select-box] {
  border-color: var(--sl-input-error-text-color);
}
.form-control--has-error-text .form-control__error-text {
  display: block;
  color: var(--sl-input-error-text-color);
}
.form-control--has-error-text .form-control__error-text ::slotted(*) {
  margin-top: var(--sl-spacing-xxx-small);
}
.form-control--has-error-text.form-control--small .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-small);
}
.form-control--has-error-text.form-control--medium .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-medium);
}
.form-control--has-error-text.form-control--large .form-control__error-text {
  font-size: var(--sl-input-error-text-font-size-large);
}

: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);
  background-color: var(--sl-input-background-color);
  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
  vertical-align: middle;
  transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
  cursor: text;
}
.textarea:hover:not(.textarea--disabled) {
  background-color: var(--sl-input-background-color-hover);
  border-color: var(--sl-input-border-color-hover);
}
.textarea:hover:not(.textarea--disabled) .textarea__control {
  color: var(--sl-input-color-hover);
}
.textarea.textarea--focused:not(.textarea--disabled) {
  background-color: var(--sl-input-background-color-focus);
  border-color: var(--sl-input-border-color-focus);
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
  color: var(--sl-input-color-focus);
}
.textarea.textarea--focused:not(.textarea--disabled) .textarea__control {
  color: var(--sl-input-color-focus);
}
.textarea.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.textarea--disabled .textarea__control {
  color: var(--sl-input-color-disabled);
}
.textarea.textarea--disabled .textarea__control::placeholder {
  color: var(--sl-input-placeholder-color-disabled);
}

.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;
}
.textarea__control:focus {
  outline: none;
}

.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);
}

.textarea--resize-none .textarea__control {
  resize: none;
}

.textarea--resize-vertical .textarea__control {
  resize: vertical;
}

.textarea--resize-auto .textarea__control {
  height: auto;
  resize: none;
}