/**
 * @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-text-field {
    --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
    --radius: var(--telekom-radius-standard);
    --border: var(--telekom-spacing-unit-x025) solid
    var(--telekom-color-ui-outlined-border-standard);
    --border-error: var(--telekom-spacing-unit-x05) 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);
    --height: var(--telekom-spacing-unit-x12);
    --height-small: var(--telekom-spacing-unit-x10);
    --spacing-x: var(--telekom-spacing-unit-x3);
    --color-disabled: var(--telekom-color-text-and-icon-disabled);
    --background-disabled: var(--telekom-color-ui-outlined-fill-disabled);
    --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: var(--telekom-spacing-unit-x3) var(--spacing-x) 0
    calc(var(--spacing-x) - 1px);
    --transition-control: var(--transition);
    --font-size-control: var(--telekom-typography-font-size-body);
    --background-control: var(--telekom-color-ui-outlined-fill-standard);

    /* 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-text-and-icon-functional-informational
    );
    --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-small: var(--telekom-typography-font-size-body);
    --font-weight-label-small: 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);
}

.text-field {
    position: relative;
}
.text-field .text-field__helper-text,
.text-field .text-field__counter {
    font-weight: var(--font-weight-meta);
}
.text-field .text-field__control {
    width: 100%;
    height: var(--height);
    margin: 0;
    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-radius: var(--radius);
    border: var(--border);
    background-color: var(--background-control);
    color: var(--color-meta);
}
.text-field .text-field__counter {
    display: flex;
    transition: var(--transition-counter);
    margin-left: auto;
    padding-right: var(--spacing-x);
    justify-content: flex-end;
    font-size: var(--font-size-counter);
    line-height: var(--line-height-counter);
    color: inherit;
}
.text-field .text-field__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);
}
.text-field .text-field__meta {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-y-meta);
    color: var(--color-meta);
}

.text-field:not(.text-field--disabled):not(.text-field--readonly)
.text-field__control:hover {
    border-color: var(--border-color-hover);
    background-color: var(--background-color-hover);
}

.text-field:not(.text-field--disabled):not(.text-field--readonly)
.text-field__control:focus {
    border-color: var(--border-color-focus);
    box-shadow: var(--box-shadow-focus);
}

.text-field:not(.text-field--disabled) .text-field__control:focus::placeholder {
    color: var(--color-placeholder);
}

.text-field .text-field__control::placeholder,
.text-field ::placeholder {
    color: transparent;
    transition: var(--transition-placeholder);
}

.text-field__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);
    transform: translate(
            var(--spacing-x),
            calc((var(--height) - var(--font-size-label)) / 2)
    );
    font-weight: var(--font-weight-label);
}
.text-field--has-focus:not(.text-field--readonly) .text-field__label,
.animated .text-field__label {
    line-height: var(--telekom-typography-font-size-small);
    transform: translate(var(--spacing-x), var(--telekom-spacing-unit-x2));
    font-size: var(--font-size-label-focus);
    font-weight: var(--font-weight-label-focus);
}
.text-field--status-error .text-field__control {
    border: var(--border-error);
}

.text-field--status-error:not(.text-field--disabled):not(.text-field--readonly)
.text-field__control:hover,
.text-field--status-error:not(.text-field--disabled):not(.text-field--readonly)
.text-field__control:focus {
    border-color: var(--telekom-color-functional-danger-hovered);
}

.text-field--status-error .text-field__helper-text {
    color: var(--color-helper-text-error);
}
.text-field--status-error .text-field__counter {
    color: var(--color-counter-error);
}
.text-field--size-small .text-field__control {
    height: var(--height-small);
}
.text-field--size-small .text-field__label {
    font-size: var(--font-size-label-small);
    transform: translate(
            var(--spacing-x),
            calc((var(--height-small) - var(--font-size-label-small)) / 2)
    );
    font-weight: var(--font-weight-label-small);
}
.text-field--size-small.text-field--has-focus:not(.text-field--readonly)
.text-field__label,
.text-field--size-small.animated .text-field__label {
    line-height: var(--telekom-typography-font-size-small);
    transform: translate(var(--spacing-x), var(--telekom-spacing-unit-x1));
    font-size: var(--font-size-label-focus);
}
.text-field--transparent .text-field__control {
    background-color: transparent;
}
.text-field--readonly input,
.text-field--readonly .text-field__control {
    color: var(--color-label-readonly);
    border-color: var(--border-color-readonly);
    background: var(--background-readonly);
}

.text-field--readonly .text-field__control:focus {
    box-shadow: var(--box-shadow-focus);
}

.text-field--disabled label,
.text-field--disabled .text-field__label,
.text-field--disabled input,
.text-field--disabled .text-field__control,
.text-field--disabled .text-field__meta,
.text-field--disabled .text-field__counter,
.text-field--disabled .text-field__helper-text {
    cursor: not-allowed;
    border-color: var(--border-color-disabled);
    background-color: var(--background-color-disabled);
    color: var(--color-disabled);
    background: transparent;
}
.text-field--disabled.animated label.text-field__label {
    color: var(--color-disabled);
}

/*Hide Arrows From Input Number*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}