/**
 * @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-dropdown {
    --font-weight: var(--telekom-typography-font-weight-bold);
    --height: var(--telekom-spacing-unit-x12);
    --height-small: var(--telekom-spacing-unit-x10);
    --spacing-x: var(--telekom-spacing-unit-x3);
    --spacing-dropdown: var(--telekom-spacing-unit-x3)
    var(--telekom-spacing-unit-x10) 0 calc(var(--spacing-x) - 1px);
    --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);
    --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
    var(--telekom-color-functional-focus);
    --color-disabled: var(--telekom-color-text-and-icon-disabled);
    --background-disabled: var(--telekom-color-ui-outlined-fill-disabled);

    /*input*/
    --transition-input: var(--transition);
    --font-size-input: var(--telekom-typography-font-size-body);

    /*helper-text*/
    --transition-helper-text: var(--transition);
    --font-size-helper-text: var(--telekom-typography-font-size-small);
    --line-height-helper-text: var(--telekom-typography-line-spacing-standard);
    --color-helper-text: var(
        --telekom-color-text-and-icon-functional-informational
    );
    --color-helper-text-error: var(
        --telekom-color-text-and-icon-functional-danger
    );

    /*meta*/
    --spacing-y-meta: var(--telekom-spacing-unit-x1);
    --color-meta: var(--telekom-color-text-and-icon-standard);

    /*icon*/
    --height-icon: var(--telekom-spacing-unit-x6);
    --color-icon: var(--telekom-color-text-and-icon-standard);
    --color-icon-hover: var(--telekom-color-text-and-icon-standard);
    --color-icon-active: var(--telekom-color-text-and-icon-standard);
    --transition-icon: var(--transition);

    /*label*/
    --color-label: var(--telekom-color-text-and-icon-additional);
    --z-index-label: var(--scl-z-index-10);
    --transition-label: var(--transition);
    --font-size-label: var(--telekom-typography-font-size-body);
    --font-size-label-small: 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);
}

.dropdown {
    position: relative;
}
.dropdown .input__helper-text {
    font-weight: var(--font-weight);
}

.dropdown .input__dropdown {
    width: 100%;
    height: var(--height);
    margin: 0;
    display: flex;
    outline: none;
    padding: var(--spacing-dropdown);
    z-index: 1;
    box-sizing: border-box;
    transition: var(--transition-input);
    font-family: inherit;
    font-size: var(--font-size-input);
    border-radius: var(--radius);
    border: var(--border);
    white-space: nowrap;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--telekom-color-ui-outlined-fill-standard);
    color: var(--telekom-color-text-and-icon-standard);
}

@-moz-document url-prefix() {
    .dropdown .input__dropdown {
        text-indent: -2px;
    }
}

.dropdown .input__dropdown-wrapper {
    position: relative;
}
.dropdown .input__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);
}
.dropdown .input__meta {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-y-meta);
    color: var(--color-meta);
}

.dropdown.dropdown--disabled .input__dropdown-wrapper .input__dropdown-icon {
    color: var(--color-disabled);
}

.dropdown:not(.dropdown--disabled):hover .input__dropdown-icon {
    color: var(--color-icon-hover);
}
.dropdown:not(.dropdown--disabled):active .input__dropdown-icon {
    color: var(--color-icon-active);
}
.dropdown:not(.dropdown--disabled):not(.dropdown--status-error)
.input__dropdown:hover {
    border-color: var(--border-color-hover);
    background-color: var(--telekom-color-ui-outlined-fill-hovered);
}
.dropdown:not(.dropdown--disabled).dropdown--status-error
.input__dropdown:hover {
    border-color: var(--telekom-color-functional-danger-hovered);
    background-color: var(--telekom-color-ui-outlined-fill-hovered);
}

.dropdown:not(.dropdown--disabled):not(.dropdown--status-error)
.input__dropdown:focus {
    border-color: var(--border-color-focus);
}
.dropdown:not(.dropdown--disabled).dropdown--status-error
.input__dropdown:focus {
    border-color: var(--telekom-color-functional-danger-hovered);
}
.dropdown:not(.dropdown--disabled) .input__dropdown:focus {
    box-shadow: var(--box-shadow-focus);
}
.dropdown .input__dropdown-wrapper .input__dropdown-icon {
    top: 50%;
    right: var(--spacing-x);
    position: absolute;
    transform: translateY(-50%);
    pointer-events: none;
    height: var(--height-icon);
    color: var(--color-icon);
    transition: var(--transition-icon);
}

.input__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(--telekom-spacing-unit-x12) - var(--font-size-label)) / 2)
    );
    font-weight: var(--font-weight-label);
}

.animated .input__label {
    transform: translate(var(--spacing-x), var(--telekom-spacing-unit-x2));
    font-size: var(--font-size-label-focus);
    font-weight: var(--font-weight-label-focus);
    line-height: var(--telekom-typography-font-size-small);
}

.dropdown--status-error .input__dropdown {
    border: var(--border-error);
}
.dropdown--status-error .input__helper-text {
    color: var(--color-helper-text-error);
}
.dropdown--size-small .input__dropdown {
    height: var(--height-small);
}
.dropdown--size-small .input__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);
}

.dropdown--size-small.animated .input__label {
    transform: translate(var(--spacing-x), var(--telekom-spacing-unit-x1));
    font-size: var(--font-size-label-focus);
    font-weight: var(--font-weight-label-focus);
    line-height: var(--telekom-typography-font-size-small);
}

.dropdown--transparent .input__dropdown {
    background-color: transparent;
}

.dropdown--disabled label,
.dropdown--disabled .input__label,
.dropdown--disabled input,
.dropdown--disabled .input__dropdown,
.dropdown--disabled .input__helper-text {
    cursor: not-allowed;
    border-color: var(--border-color-disabled);
    color: var(--color-disabled);
    background: var(--background-disabled);
}