import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
import { resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';

export default (cssVarList) => `
:host {
	display: inline-flex;
}

${resetInputFieldDefaultWidth()}

.wrapper {
	display: flex;
	box-sizing: border-box;
}
vaadin-text-field {
	position: relative;
	padding: 0;
	display: inline-flex;
	align-items: flex-start;
}
vaadin-text-field::before {
  content: unset;
}
vaadin-text-field::part(label) {
  position: absolute;
  top: 0;
}
vaadin-text-field::part(input-field) {
	padding: 0;
	background: none;
	min-height: 0;
}
vaadin-text-field::part(input-field)::after {
  background: none;
}
vaadin-text-field[focus-ring]::part(input-field) {
	box-shadow: none;
}

vaadin-checkbox [slot="label"] {
  align-self: flex-start;
  padding: 0;
}
[required] vaadin-checkbox [slot="label"]:not(:empty) {
	padding-inline-end: 1em;
}
descope-boolean-field-internal {
  -webkit-mask-image: none;
  min-height: initial;
}

descope-enriched-text[empty] {
	${EnrichedTextClass.cssVarList.hostDisplay}: none;
}

descope-enriched-text {
	${EnrichedTextClass.cssVarList.hostDirection}: var(${cssVarList.hostDirection});
}

`;
