/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

.liquid-design-form.ldf-multilinetext-field {
    --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
    --radius: var(--telekom-radius-standard);
    --border: var(--telekom-line-weight-standard) solid
    var(--telekom-color-ui-outlined-border-standard);
    --border-error: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-danger-standard);
    --border-color-hover: var(--telekom-color-ui-outlined-border-hovered);
    --border-color-focus: var(--telekom-color-ui-outlined-border-hovered);
    --border-color-disabled: var(--telekom-color-ui-outlined-border-disabled);
    --background-color-hover: var(--telekom-color-ui-outlined-fill-hovered);
    --background-color-disabled: var(--telekom-color-ui-outlined-fill-disabled);
    --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
    var(--telekom-color-functional-focus);
    --spacing-x-control: var(--telekom-spacing-unit-x3);
    --spacing-bottom-control: var(--telekom-spacing-unit-x3);
    --spacing-top-control: var(--telekom-spacing-unit-x6);
    --color-disabled: var(--telekom-color-text-and-icon-disabled);
    --background-disabled: transparent;
    --border-color-readonly: var(--telekom-color-ui-outlined-border-disabled);
    --background-readonly: var(--telekom-color-ui-solid-disabled);

    /*meta*/
    --font-weight-meta: var(--telekom-typography-font-weight-bold);
    --font-size-meta: var(--telekom-typography-font-size-small);
    --line-height-meta: var(--telekom-typography-line-spacing-standard);
    --spacing-y-meta: var(--telekom-spacing-unit-x1);
    --color-meta: var(--telekom-color-text-and-icon-standard);
    --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);

    /*control*/
    --spacing-control: 0 var(--spacing-x-control) var(--spacing-top-control);
    --transition-control: var(--transition);
    --font-size-control: var(--telekom-typography-font-size-body);
    --background-control: var(--telekom-color-ui-outlined-fill-standard);
    --spacing-x: var(--telekom-spacing-unit-x3);
    /*counter*/
    --transition-counter: var(--transition);
    --font-size-counter: var(--font-size-meta);
    --line-height-counter: var(--line-height-meta);
    --color-counter-error: var(--color-meta-error);

    /*helper-text*/
    --transition-helper-text: var(--transition);
    --font-size-helper-text: var(--font-size-meta);
    --line-height-helper-text: var(--line-height-meta);
    --color-helper-text: var(--telekom-color-functional-informational-standard);
    --color-helper-text-error: var(--color-meta-error);


    /*placeholder*/
    --transition-placeholder: var(--transition);
    --color-placeholder: var(--telekom-color-text-and-icon-additional);

    /*label*/
    --color-label: var(--telekom-color-text-and-icon-additional);
    --color-label-readonly: var(--telekom-color-text-and-icon-standard);
    --z-index-label: var(--scl-z-index-10);
    --transition-label: var(--transition);
    --font-size-label: var(--telekom-typography-font-size-body);
    --font-weight-label: var(--telekom-typography-font-weight-medium);
    --font-size-label-focus: var(--telekom-typography-font-size-footnote);
    --font-weight-label-focus: var(--telekom-typography-font-weight-bold);
}

.textarea {
    position: relative;
    display: flex;
    flex-direction: column;
}
.textarea__wrapper {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: var(--border);
}

.textarea__wrapper .textarea__control {
    margin: 0;
    width: 100%;
    resize: vertical;
    display: flex;
    outline: none;
    padding: var(--spacing-control);
    z-index: 1;
    box-sizing: border-box;
    transition: var(--transition-control);
    font-family: inherit;
    font-size: var(--font-size-control);
    border: none;
    background-color: transparent;
    color: var(--color-meta);
    margin-top: var(--spacing-top-control);
}

.textarea .textarea__helper-text,
.textarea .textarea__counter {
    font-weight: var(--telekom-typography-font-weight-bold);
}

.textarea .textarea__counter {
    display: flex;
    transition: var(--transition-counter);
    margin-left: auto;
    padding-right: var(--telekom-spacing-unit-x3);
    justify-content: flex-end;
    font-size: var(--telekom-typography-font-size-small);
    line-height: var(--telekom-typography-line-spacing-standard);
    color: inherit;
}
.textarea .textarea__helper-text {
    transition: var(--transition-helper-text);
    padding-left: var(--spacing-x);
    font-size: var(--font-size-helper-text);
    line-height: var(--line-height-helper-text);
    color: var(--color-helper-text);
}
.textarea .textarea__meta {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-y-meta);
    color: var(--color-meta);
}

.textarea:not(.textarea--disabled):not(.textarea--readonly)
.textarea__wrapper:hover {
    border-color: var(--border-color-hover);
    background-color: var(--background-color-hover);
}

.textarea:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus
.textarea__wrapper {
    border-color: var(--border-color-focus);
    box-shadow: var(--box-shadow-focus);
}

.textarea:not(.textarea--disabled) .textarea__control:focus::placeholder {
    color: var(--color-placeholder);
}

.textarea .textarea__control::placeholder,
.textarea ::placeholder {
    color: transparent;
    transition: var(--transition-placeholder);
}

.textarea__label {
    top: 0;
    left: 0;
    color: var(--color-label);
    display: flex;
    z-index: var(--z-index-label);
    position: absolute;
    transition: var(--transition-label);
    pointer-events: none;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    transform: translate(
        var(--spacing-x-control),
        calc((var(--telekom-spacing-unit-x12) - var(--font-size-label)) / 2)
    );
    max-width: calc(100% - var(--spacing-x) * 2);
}
.textarea--has-focus .textarea__label,
.animated .textarea__label {
    transform: translate(
        var(--spacing-x-control),
        var(--telekom-spacing-unit-x2)
    );
    font-size: var(--font-size-label-focus);
    font-weight: var(--font-weight-label-focus);
}
.textarea--status-error .textarea__wrapper {
    border: var(--border-error);
}

.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly)
.textarea__wrapper:hover,
.textarea--status-error:not(.textarea--disabled):not(.textarea--readonly).textarea--has-focus
.textarea__wrapper {
    border-color: var(--telekom-color-functional-danger-hovered);
}

.textarea--status-error .textarea__helper-text {
    color: var(--color-helper-text-error);
}
.textarea--status-error .textarea__counter {
    color: var(--color-counter-error);
}

.textarea--transparent .textarea__control {
    background-color: transparent;
}

.textarea--readonly .textarea__wrapper {
    border-color: var(--border-color-readonly);
    background: var(--background-readonly);
}

.textarea--readonly.textarea--has-focus .textarea__wrapper {
    box-shadow: var(--box-shadow-focus);
}

.textarea--readonly textarea,
.textarea--readonly .textarea__wrapper .textarea__control {
    color: var(--color-label-readonly);
}

.textarea--disabled label,
.textarea--disabled .textarea__label,
.textarea--disabled textarea,
.textarea--disabled .textarea__wrapper,
.textarea--disabled .textarea__control,
.textarea--disabled .textarea__meta,
.textarea--disabled .textarea__helper-text {
    cursor: not-allowed;
    color: var(--color-disabled);
}

.textarea--disabled .textarea__wrapper {
    border-color: var(--border-color-disabled);
    background-color: var(--background-color-disabled);
}