export const useHostExternalPadding = (cssVarList) => `
    :host {
        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
    }
`;

export const resetInputFieldUnderlayingBorder = (name) => `
    ${name}::part(input-field)::after {
        border: none;
    }
`;

export const resetInitialHeight = (name) => `
    ${name}::before {
		height: unset;
	}
`;

export const resetInputElement = (name) => `
    ${name} > input {
        -webkit-mask-image: none;
        min-height: 0;
        box-sizing: border-box;
    }
`;

export const resetInputContainer = (name) => `
    ${name} {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
`;

export const resetInputField = (name) => `
    ${name}::part(input-field) {
        overflow: hidden;
        padding: 0;
        box-shadow: none;
    }
`;

export const resetInputCursor = (name) => `
    ${name} > label,
    ${name}::part(label),
    ${name}::part(required-indicator) {
        cursor: pointer;
    }
`;

export const resetInputPlaceholder = (name, ele = 'input') => `
    ${name}[disabled] > ${ele}:placeholder-shown,
	${name}[readonly] > ${ele}:placeholder-shown {
		opacity: 1;
	}
`;

export const resetInputAutoFill = (name, cssVarList) => `
    ${name} input:-webkit-autofill,
    ${name} input:-webkit-autofill::first-line,
    ${name} input:-webkit-autofill:hover,
    ${name} input:-webkit-autofill:active,
    ${name} input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
    }
`;

export const resetInputFieldDefaultWidth = () => `
    :host {
        --vaadin-field-default-width: auto;
        box-sizing: border-box;
    }
`;

export const resetInputReadonlyStyle = (name) => `
    ${name}::part(input-field)::after {
        opacity: 0;
    }
`;

export const resetInputFieldInvalidBackgroundColor = (name) => `
    ${name}::part(input-field)::after {
        background: none;
    }
`;

export const resetInputOverrides = (name, cssVarList) => `
    ${resetInputContainer(name)}
    ${resetInputCursor(name)}
    ${resetInputPlaceholder(name)}
    ${resetInputField(name)}
    ${resetInputAutoFill(name, cssVarList)}
    ${resetInputFieldInvalidBackgroundColor(name)}
    ${resetInitialHeight(name)}
    ${resetInputElement(name)}
    ${resetInputFieldUnderlayingBorder(name)}
`;

// This function is used to support RTL correctly for input components.
// It also fixes the error message to be displayed LTR since we currently
// don't support RTL for error messages.
export const resetInputLabelPosition = (name) => `
    :host ::part(error-message) {
      direction: ltr;
    }
    :host([required]) ::part(required-indicator) {
      width: 1em;
      display: inline-flex;
    }
    :host([required]) ::part(required-indicator)::after {
      position: static;
    }
    :host([has-label]) ::part(label) {
      padding-right: 0;
      padding-bottom: 0;
      display: flex;
      width: 100%;
    }
    ${name} [slot="label"] {
      max-width: calc(100% - 1em);
      overflow: hidden;
      text-overflow: ellipsis;
      padding-bottom: 0.5em;
    }
`;

export const inputFloatingLabelStyle = () => `
  :host([label-type="floating"]) {
    position: relative;
  }
  :host([label-type="floating"][has-label]) > ::part(label) {
    z-index: 1;
    padding: 0;
    width: auto;
  }
  `;
