@use  '../../assets/styles/index.scss' as *;

.root {
    --uui-text_input-bg: var(--uui-control-bg);
    --uui-text_input-bg-disabled: var(--uui-control-bg-disabled);
    --uui-text_input-bg-readonly: var(--uui-control-bg-disabled);
    --uui-text_input-border: var(--uui-control-border);
    --uui-text_input-border-hover: var(--uui-control-border-hover);
    --uui-text_input-border-active: var(--uui-control-border-focus);
    --uui-text_input-border-error: var(--uui-error-50);
    --uui-text_input-border-disabled: var(--uui-control-border-disabled);
    --uui-text_input-border-readonly: var(--uui-control-border-disabled);
    --uui-text_input-placeholder: var(--uui-control-placeholder);
    --uui-text_input-placeholder-disabled: var(--uui-control-placeholder-disabled);
    --uui-text_input-placeholder-readonly: var(--uui-control-placeholder-disabled);
    --uui-text_input-text: var(--uui-control-text);
    --uui-text_input-text-disabled: var(--uui-control-text-disabled);
    --uui-text_input-icon: var(--uui-control-icon);
    --uui-text_input-icon-disabled: var(--uui-control-icon-disabled);
    --uui-text_input-icon-clickable: var(--uui-icon);
    --uui-text_input-icon-clickable-hover: var(--uui-icon-hover);

    // font
    --uui-text_input-font: var(--uui-font);
    --uui-text_input-font-weight: 400;

    // size
    --uui-text_input-border-radius: var(--uui-border-radius);
    --uui-text_input-min-height: var(--uui-size);
    --uui-text_input-min-width: var(--uui-size);
    --uui-text_input-border-width: var(--uui-border-width);
    --uui-text_input-horizontal-padding: var(--uui-horizontal-padding);
    --uui-text_input-horizontal-gap: var(--uui-horizontal-gap);
    --uui-text_input-icon-height: var(--uui-icon-size);
    --uui-text_input-line-height: var(--uui-line-height);
    --uui-text_input-font-size: var(--uui-font-size);


    //
    fill: var(--uui-text_input-icon);
    border-style: solid;
    box-sizing: border-box;
    min-width: var(--uui-text_input-min-width);
    padding-inline-start: calc(var(--uui-text_input-horizontal-padding) - var(--uui-text_input-border-width));
    padding-inline-end: calc(var(--uui-text_input-horizontal-padding) - var(--uui-text_input-border-width));
    border-radius: var(--uui-text_input-border-radius);

    &:global(.uui-input-box) {
        height: var(--uui-text_input-min-height);
        border-width: var(--uui-text_input-border-width);
    }

    :global(.uui-input) {
        color: var(--uui-text_input-text);
        font-family: var(--uui-text_input-font);
        font-weight: var(--uui-text_input-font-weight);
        line-height: var(--uui-text_input-line-height);
        font-size: var(--uui-text_input-font-size);
        padding: calc((var(--uui-text_input-min-height) - var(--uui-text_input-line-height) - (var(--uui-text_input-border-width) * 2)) / 2) var(--uui-text_input-horizontal-gap);

        &::placeholder {
            color: var(--uui-text_input-placeholder);
        }

        &:placeholder-shown {
            text-overflow: ellipsis;
        }

        &::-moz-placeholder {
            opacity: 1;
        }
    }

    :global(.uui-icon) {
        svg {
            height: var(--uui-text_input-icon-height);
            width: inherit;
        }
    }

    &.mode-form {
        background-color: var(--uui-text_input-bg);
        border-color: var(--uui-text_input-border);

        :global(.-clickable) {
            fill: var(--uui-text_input-icon-clickable);

            &:hover {
                fill: var(--uui-text_input-icon-clickable-hover);
            }
        }

        &:hover {
            border-color: var(--uui-text_input-border-hover);
        }

        &:global(.uui-focus) {
            border-color: var(--uui-text_input-border-active);
        }
    }

    &.mode-inline {
        background-color: transparent;
        border-color: transparent;

        :global(.-clickable) {
            fill: var(--uui-text_input-icon-clickable);

            &:hover {
                fill: var(--uui-text_input-icon-clickable-hover);
            }
        }

        &:hover {
            border-color: var(--uui-text_input-border-hover);
        }

        &:global(.uui-focus) {
            border-color: var(--uui-text_input-border-active);
        }
    }

    &.mode-cell {
        background-color: transparent !important;
        border-color: transparent;

        :global(.-clickable) {
            fill: transparent;
        }

        &:hover {
            :global(.-clickable) {
                fill: var(--uui-text_input-icon-clickable);

                &:hover {
                    fill: var(--uui-text_input-icon-clickable-hover);
                }
            }
        }
    }

    &:global(.uui-invalid) {
        &.mode-form, &.mode-inline {
            background-color: var(--uui-text_input-bg);
            border-color: var(--uui-text_input-border-error);
        }
    }

    &:global(.uui-readonly) {
        color: var(--uui-text_input-text);
        fill: var(--uui-text_input-icon);
        pointer-events: none;

        :global(.uui-input) {
            &::placeholder {
                -webkit-text-fill-color: var(--uui-text_input-placeholder-readonly); // to avoid color inheritance from input component
                color: var(--uui-text_input-placeholder-readonly);
            }
        }

        &.mode-form {
            background-color: var(--uui-text_input-bg-readonly);
            border-color: var(--uui-text_input-border-readonly);
        }
    }

    &:global(.uui-disabled) {
        color: var(--uui-text_input-text-disabled);
        fill: var(--uui-text_input-icon-disabled);
        pointer-events: none;

        :global(.uui-input) {
            -webkit-text-fill-color: var(--uui-text_input-text-disabled); // safari bugfix, more: https://stackoverflow.com/questions/43483363/safari-color-with-background-transparency-on-disabled-input
            color: var(--uui-text_input-text-disabled);

            &::placeholder {
                -webkit-text-fill-color: var(--uui-text_input-placeholder-disabled); // to avoid color inheritance from input component
                color: var(--uui-text_input-placeholder-disabled);
            }
        }

        &.mode-form {
            background-color: var(--uui-text_input-bg-disabled);
            border-color: var(--uui-text_input-border-disabled);
        }
    }
}
