@use '@justeattakeaway/pie-css/scss' as p;

:host {
    display: block;
}

.c-textInput {
    --input-padding-block: var(--dt-spacing-c);
    --input-padding-inline: var(--dt-spacing-d);
    --input-gap: var(--dt-spacing-d);
    --input-text-color: var(--dt-color-content-default);
    --input-text-color-leading-trailing-content: var(--dt-color-content-default);
    --input-text-color-placeholder: var(--dt-color-content-placeholder);
    --input-border-color: var(--dt-color-border-form);
    --input-container-color: var(--dt-color-container-default);
    --input-radius: var(--dt-radius-rounded-c);
    --input-font-family: var(--dt-font-body-l-family);
    --input-font-size: #{p.font-size(--dt-font-body-l-size)};
    --input-line-height: #{p.font-size(--dt-font-body-l-line-height)};
    --input-height: 48px;
    --input-cursor: text;

    // Ensures icons added to trailing and leading content are displayed at the allowed size
    --icon-size-override: 24px;

    height: var(--input-height);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-radius);
    padding-inline-start: var(--input-padding-inline);
    padding-inline-end: var(--input-padding-inline);
    padding-block-start: var(--input-padding-block);
    padding-block-end: var(--input-padding-block);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: var(--input-container-color);
    color: var(--input-text-color-leading-trailing-content); // Applies to the leadingText and trailingText slot content
    cursor: var(--input-cursor);

    &.c-textInput--large {
        --input-padding-block: var(--dt-spacing-d);
        --input-height: 56px;
    }

    &.c-textInput--small {
        --input-padding-block: var(--dt-spacing-b);
        --input-height: 40px;
    }

    &.c-textInput--error {
        --input-border-color: var(--dt-color-support-error);
    }

    ::slotted([slot="leadingText"]),
    ::slotted([slot="leadingIcon"]) {
        margin-inline-end: var(--input-gap);
    }

    ::slotted([slot="trailingText"]),
    ::slotted([slot="trailingIcon"]) {
        margin-inline-start: var(--input-gap);
    }

    @supports (gap: var(--input-gap)) {
        gap: var(--input-gap);

        ::slotted([slot="leadingText"]),
        ::slotted([slot="leadingIcon"]) {
            margin-inline-end: 0;
        }

        ::slotted([slot="trailingText"]),
        ::slotted([slot="trailingIcon"]) {
            margin-inline-start: 0;
        }
    }

    &:not(.is-disabled) ::slotted([slot="leadingIcon"]),
    &:not(.is-disabled) ::slotted([slot="trailingIcon"]) {
        color: var(--dt-color-content-subdued);
    }

    @media (hover: hover) {
        &:hover {
            --input-container-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));

            @supports (background-color: color-mix(in srgb, black, white)) {
                --input-container-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01),  var(--dt-color-container-default));
            }
        }
    }

    &.is-readonly {
        --input-container-color: var(--dt-color-container-subtle);
        --input-border-color: var(--dt-color-border-form);
    }

    // Ensure that if an input is readonly and disabled, the disabled styles take precedence
    &.is-disabled.is-readonly,
    &.is-disabled {
        --input-container-color: var(--dt-color-disabled-01);
        --input-border-color: var(--dt-color-disabled-01);
        --input-text-color: var(--dt-color-content-disabled);
        --input-text-color-placeholder: var(--dt-color-content-disabled);
        --input-text-color-leading-trailing-content: var(--dt-color-content-disabled);
        --input-cursor: auto;
    }

    &:focus-within {
        @include p.focus;
    }
}

input {
    border: 0;
    outline: 0;
    height: 24px;
    padding: 0;
    color: var(--input-text-color);
    width: 100%;
    font-size: var(--input-font-size);
    font-family: inherit;
    background: none;
    cursor: inherit;
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

    &::placeholder {
        color: var(--input-text-color-placeholder);

        opacity: 1; // normalize opacity for all browsers
    }

    &:disabled {
        -webkit-text-fill-color: var(--input-text-color); // Remove the greyed out text in Safari
        color: var(--input-text-color);
        -webkit-opacity: 1;
        opacity: 1;
    }
}

input[type="number"]:not([step])::-webkit-inner-spin-button,
input[type="number"]:not([step])::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"]:not([step]) {
    -moz-appearance: textfield;
}