@import '../utils.less';

tui-textfield:where(*&) {
    .scrollbar-hidden();
    .transition(color, @tui-duration-fast);

    --t-height: calc(var(--tui-height-l) + 2.5 * var(--t-label) * var(--tui-font-offset));
    --t-padding: var(--tui-padding-l);
    --t-label: 0;
    --t-label-y: -0.75rem;
    --t-label-font: var(--tui-typography-ui-s);
    --t-end: ~'0px';
    --t-start: ~'0px';
    --t-side: ~'0px';
    --t-max: 0.75rem;
    --t-space: ~'clamp(0px, calc(var(--t-side) + var(--t-end)), var(--t-max))';
    --t-space-end: ~'calc(var(--t-end) + var(--t-side) + var(--t-padding) + var(--t-space))';

    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-block-size: var(--t-height);
    padding: 0 var(--t-padding);
    border-radius: var(--tui-radius-l);
    font: var(--tui-typography-ui-m);
    box-sizing: border-box;
    isolation: isolate;

    &[tuiAppearance] {
        outline: none;

        &[data-appearance=''] {
            color: var(--tui-text-tertiary);

            &:not([data-mode~='readonly']) {
                .appearance-hover({
                    color: var(--tui-text-secondary);
                });
            }
        }
    }

    &[data-icon-start] {
        --t-start: calc(2.5rem * (1 + 0.25 * var(--t-zoom)));
    }

    &[data-icon-end] {
        --t-end: 1.75rem;
    }

    &[tuiIcons] {
        &::before {
            z-index: 1;
            block-size: var(--t-height);
            inline-size: 1.5rem;
            margin-inline-end: 1rem;
            pointer-events: none;
            // Compensating zoomed icons at high font-scaling
            max-block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
        }

        &::after {
            position: relative;
            inline-size: calc(1.5rem + 2 * var(--t-padding));
            cursor: pointer;
            margin-inline-start: calc(0.25rem - var(--t-padding));
            margin-inline-end: calc(-1 * var(--t-padding));
            block-size: var(--t-height);
            // Compensating zoomed icons at high font-scaling
            max-block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
        }
    }

    &::-webkit-resizer {
        border: 0.25rem solid transparent;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        box-sizing: content-box;
        color: var(--tui-text-tertiary);
        background: linear-gradient(
            -45deg,
            transparent,
            transparent 0.125rem,
            currentColor 0.125rem,
            currentColor 0.1875rem,
            transparent 0.1875rem,
            transparent 0.25rem,
            currentColor 0.25rem,
            currentColor 0.3125rem,
            transparent 0.35rem
        );
        background-clip: content-box;
    }

    [tuiLabel],
    & > .t-content,
    & > .t-template {
        pointer-events: none;
    }

    &[data-size='s'] {
        --t-height: var(--tui-height-s);
        --t-padding: var(--tui-padding-s);
        --t-max: ~'0px';

        border-radius: var(--tui-radius-m);
        font: var(--tui-typography-ui-s);

        &[data-icon-start] {
            --t-start: 1.5rem;
        }

        &[data-icon-end] {
            --t-end: 1.5rem;
        }

        &::before {
            font-size: 1rem;
            margin-inline: -0.25rem 0.25rem;
        }

        &::after {
            inline-size: calc(0.75rem + 2 * var(--t-padding));
            margin-inline: 0 -0.5rem;
            font-size: 1rem;
        }

        & > .t-content {
            gap: 0;

            > *:last-child {
                margin-inline-end: -0.25rem;
            }
        }
    }

    &[data-size='m'] {
        --t-height: calc(var(--tui-height-m) + 2.5 * var(--t-label) * var(--tui-font-offset));
        --t-padding: var(--tui-padding-m);
        --t-label-font: var(--tui-typography-ui-xs);
        --t-label-y: -0.5625rem;
        --t-max: 0.125rem;

        border-radius: var(--tui-radius-m);
        font: var(--tui-typography-ui-s);

        &[data-icon-start] {
            --t-start: calc(2.125rem * (1 + 0.25 * var(--t-zoom)));
        }

        &[data-icon-end] {
            --t-end: 1.75rem;
        }

        &::before {
            margin-inline: -0.125rem 0.75rem;
        }

        &::after {
            inline-size: calc(1.25rem + 2 * var(--t-padding));
            margin-inline-start: calc(0.5rem - var(--t-padding));
        }

        & > .t-content > *:last-child {
            margin-inline-end: -0.125rem;
        }
    }

    &:is(._disabled, [data-state='disabled']) {
        pointer-events: none;
        opacity: var(--tui-disabled-opacity);

        [tuiAppearance]:is(._disabled, :disabled, [data-state='disabled']) {
            opacity: 1;
        }

        & > .t-content > tui-icon {
            display: none;
        }
    }

    &._with-label {
        --t-label: 1;

        & > .t-template,
        .t-filler,
        [tuiInput] {
            inset-block-end: 0;
            padding-block-start: calc(var(--t-height) / 3);
            padding-block-end: 0;
        }

        &:is(:not([data-focus='true']), [data-mode~='readonly']) {
            & > .t-template,
            [tuiInput] {
                &::placeholder,
                &._empty {
                    color: transparent;
                }
            }
        }
    }

    & > .t-template,
    .t-filler,
    [tuiInput] {
        position: absolute;
        inset-inline: 0;
        inline-size: auto;
        block-size: var(--t-height);
        appearance: none;
        background: none;
        font: inherit;
        resize: none;
        outline: none;
        color: var(--tui-text-primary);
        box-sizing: border-box;
        border-radius: inherit;
        border-width: 0;
        padding-inline-start: calc(var(--t-start) + var(--t-padding));
        padding-inline-end: var(--t-space-end);
        white-space: nowrap;
        overflow: hidden;

        &:is(input, textarea):read-only ~ .t-filler {
            display: none;
        }

        &:disabled {
            animation: tuiPresent 1s infinite;
            opacity: 1;
        }

        &[inputmode='none'] {
            caret-color: transparent;
        }

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            appearance: none;
        }
    }

    & > .t-template {
        padding-inline-end: 0;
        border-inline-end: var(--t-space-end) solid transparent;
    }

    &._with-template [tuiInput]:first-of-type {
        color: transparent !important;
    }

    [tuiInput]:-webkit-autofill,
    [tuiInput][chrome-autofilled], /* Chrome on IOS */
    [tuiInput]:not(._empty, :placeholder-shown),
    &[multi][multi]:not(._empty) {
        [tuiLabel],
        &:not(tui-textfield) ~ [tuiLabel] {
            font: var(--t-label-font);
            transform: translateY(calc(var(--t-label-y) - var(--tui-font-offset) / 2));
        }
    }

    // Increasing specificity to override all other styles
    [tuiLabel][tuiLabel][tuiLabel] {
        .transition(all);
        .text-overflow();

        position: relative;
        display: block;
        max-inline-size: calc(100% - var(--t-start));
        flex: 1;
        align-self: flex-start;
        font: inherit;
        user-select: none;
        padding: calc(var(--t-height) / 2 - 0.625em) 0;
        line-height: 1.25 !important;
        transition-duration: inherit;

        + .t-content {
            margin-inline-start: 0;
        }
    }

    [tuiLabel],
    [tuiInput]::placeholder,
    [tuiInput]._empty {
        color: var(--tui-text-secondary);
    }

    select {
        option[value='']:disabled {
            // Hide placeholder from native datalist (Windows OS only)
            color: transparent;
        }

        optgroup,
        option {
            // Windows OS only
            background-color: var(--tui-background-elevation-1);
        }

        optgroup,
        option:not(:disabled) {
            // In Windows OS native options inherit color of host <select>
            color: var(--tui-text-primary);
        }
    }

    button,
    a,
    tui-icon {
        pointer-events: auto;
    }

    & > .t-content {
        z-index: 1;
        display: flex;
        block-size: var(--t-height);
        align-items: center;
        gap: 0.25rem;
        margin-inline-start: auto;
        isolation: isolate;
        border-radius: inherit;
    }

    textarea ~ .t-content {
        min-inline-size: 0.5rem;
    }

    &:is([data-mode~='readonly'], [data-state='disabled'], ._empty) [tuiButtonX],
    [tuiInput]._empty ~ .t-content [tuiButtonX],
    [tuiInput]:disabled ~ .t-content [tuiButtonX] {
        display: none;
    }

    .t-filler {
        pointer-events: none !important;
        color: var(--tui-text-tertiary);
    }

    [tuiFluidTypography] {
        font-weight: bold;
    }

    [tuiSelectLike]:not(:read-only) {
        cursor: pointer;
    }

    &:has(input[type='tel']) {
        direction: ltr;
    }

    .appearance-invalid({
        [tuiInput]:not(._empty) ~ [tuiLabel],
        &[multi]:not(._empty) [tuiLabel] {
            color: var(--tui-text-negative);
        }
    });

    &:not([data-mode~='readonly']) {
        .appearance-focus({
            [tuiLabel] {
                color: var(--tui-text-primary) !important;
                font: var(--t-label-font);
                transform: translateY(calc(var(--t-label-y) - var(--tui-font-offset) / 2));
            }
        });
    }
}