:host {
  --pds-input-background: var(--pine-color-background-container);
  --pds-input-border-color: var(--pine-color-border);
  --pds-input-border-color-hover: var(--pine-color-border-hover);
  --pds-input-border-color-disabled: var(--pine-color-border-disabled);
  --pds-input-border-radius: var(--pine-dimension-125);
  --pds-input-border-width: var(--pine-border-width-thin);
  --pds-input-padding-x: var(--pine-dimension-150);
  --pds-input-padding-y: calc(var(--pine-dimension-xs) - var(--pine-border-width));
  --pds-input-font: var(--pine-typography-body);
  --pds-input-text-color: var(--pine-color-text-strong);
  --pds-input-placeholder-color: var(--pine-color-text-placeholder);
  --pds-input-icon-color: var(--pine-color-text-secondary);
  --pds-input-disabled-background: var(--pine-color-background-container-disabled);
  --pds-input-disabled-text-color: var(--pine-color-text-disabled);
  --pds-input-error-color: var(--pine-color-text-message-danger);
  --pds-input-error-background: var(--pine-input-color-background-danger);
  --pds-input-error-border: var(--pine-color-border-danger);
  --pds-input-error-border-hover: var(--pine-color-border-danger-hover);
  --pds-input-addon-background: var(--pine-color-background-subtle);
  --pds-input-addon-color: var(--pine-color-text-secondary);
  --pds-input-field-min-height: var(--pine-dimension-450);
  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);
  --box-shadow-focus-error: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);
  display: inline;
}
:host pds-select::part(select) {
  background-color: var(--pds-input-error-background);
  border-color: var(--pds-input-error-border);
}
:host::part(prefix), :host::part(suffix) {
  align-items: center;
  color: var(--pine-color-text-label-readonly);
  display: flex;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: var(--pine-z-index-raised);
}
:host::part(prefix) {
  border-end-start-radius: var(--pds-input-border-radius);
  border-inline-end: var(--pine-border-width-none);
  border-start-start-radius: var(--pds-input-border-radius);
  inset-inline-start: var(--pds-input-padding-x);
}
:host::part(suffix) {
  border-end-end-radius: var(--pds-input-border-radius);
  border-inline-start: var(--pine-border-width-none);
  border-start-end-radius: var(--pds-input-border-radius);
  inset-inline-end: var(--pds-input-padding-x);
}
:host::part(prepend), :host::part(append) {
  align-items: center;
  background-color: var(--pds-input-addon-background);
  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
  color: var(--pds-input-addon-color);
  display: flex;
  overflow: visible;
}
:host::part(prepend) {
  border-end-start-radius: var(--pds-input-border-radius);
  border-inline-end: var(--pine-border-width-none);
  border-start-start-radius: var(--pds-input-border-radius);
}
:host::part(append) {
  border-end-end-radius: var(--pds-input-border-radius);
  border-inline-start: var(--pine-border-width-none);
  border-start-end-radius: var(--pds-input-border-radius);
}

/* stylelint-disable-next-line */
:host([has-prepend]) ::slotted(pds-button[slot=prepend]) {
  --pds-button-background: var(--pds-input-addon-background);
  --pds-button-border: var(--pine-border-width-none);
  --pds-button-border-radius: var(--pine-dimension-none);
  --pds-button-border-radius-end-end: var(--pine-dimension-none);
  --pds-button-border-radius-start-end: var(--pine-dimension-none);
  --pds-button-border-radius-start-start: var(--pds-input-border-radius);
  --pds-button-border-radius-end-start: var(--pds-input-border-radius);
  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);
  --pds-button-outline-focus: none;
}

/* stylelint-disable-next-line */
:host([has-append]) ::slotted(pds-button[slot=append]) {
  --pds-button-background: var(--pds-input-addon-background);
  --pds-button-border: var(--pine-border-width-none);
  --pds-button-border-radius: var(--pine-dimension-none);
  --pds-button-border-radius-end-start: var(--pine-dimension-none);
  --pds-button-border-radius-start-start: var(--pine-dimension-none);
  --pds-button-border-radius-start-end: var(--pds-input-border-radius);
  --pds-button-border-radius-end-end: var(--pds-input-border-radius);
  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);
  --pds-button-outline-focus: none;
}

/* stylelint-disable-next-line */
:host([has-prepend]) ::slotted(pds-select[slot=prepend]) {
  --pds-select-background: var(--pds-input-addon-background);
  --pds-select-border: var(--pine-border-width-none);
  --pds-select-border-radius-end-end: var(--pine-dimension-none);
  --pds-select-border-radius-end-start: var(--pds-input-border-radius);
  --pds-select-border-radius-start-end: var(--pine-dimension-none);
  --pds-select-border-radius-start-start: var(--pds-input-border-radius);
  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
}

/* stylelint-disable-next-line */
:host([has-append]) ::slotted(pds-select[slot=append]) {
  --pds-select-background: var(--pds-input-addon-background);
  --pds-select-border: var(--pine-border-width-none);
  --pds-select-border-radius-end-end: var(--pds-input-border-radius);
  --pds-select-border-radius-end-start: var(--pine-dimension-none);
  --pds-select-border-radius-start-end: var(--pds-input-border-radius);
  --pds-select-border-radius-start-start: var(--pine-dimension-none);
  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
}

:host([aria-readonly=true]) input {
  background-color: var(--pine-color-background-container-disabled);
  color: var(--pine-color-text-readonly);
}

:host([aria-disabled=true])::part(prepend), :host([aria-disabled=true])::part(append) {
  background-color: var(--pds-input-disabled-background);
  border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);
}

:host([full-width=true]) {
  width: 100%;
}

:host([invalid=true])::part(prepend), :host([invalid=true])::part(append) {
  background-color: var(--pds-input-error-background);
  border: var(--pds-input-border-width) solid var(--pds-input-error-border);
}

:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) {
  --pds-input-background: var(--pine-color-accent-disabled);
  --pds-input-border-color: var(--pine-color-accent);
  --pds-input-border-color-hover: var(--pine-color-accent-hover);
  --pds-input-text-color: var(--pine-color-text-accent);
}
:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix), :host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix) {
  color: var(--pine-color-text-accent);
}
:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible {
  outline-color: var(--pine-color-focus-ring);
}

.pds-input {
  display: flex;
  flex-direction: column;
}

.pds-input__label-wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--pine-dimension-2xs);
}

.pds-input__label {
  color: var(--pine-color-text-strong);
  margin-block-end: var(--pine-dimension-2xs);
}

.pds-input__label-wrapper .pds-input__label {
  margin-block-end: 0;
}

.pds-input__action {
  align-items: center;
  display: flex;
  gap: var(--pine-dimension-xs);
  margin-inline-start: var(--pine-dimension-xs);
}

.pds-input__field-wrapper {
  align-items: center;
  display: flex;
  position: relative;
  width: 100%;
}
.pds-input__field-wrapper.has-prefix .pds-input__field {
  padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));
}
.pds-input__field-wrapper.has-suffix .pds-input__field {
  padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));
}
.pds-input__field-wrapper.has-prepend .pds-input__field {
  border-end-start-radius: var(--pine-dimension-none);
  border-start-start-radius: var(--pine-dimension-none);
}
.pds-input__field-wrapper.has-append .pds-input__field {
  border-end-end-radius: var(--pine-dimension-none);
  border-start-end-radius: var(--pine-dimension-none);
}

.pds-input__field {
  background: var(--pds-input-background);
  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
  border-radius: var(--pds-input-border-radius);
  box-sizing: border-box;
  color: var(--pds-input-text-color);
  flex: 1;
  font: var(--pds-input-font);
  letter-spacing: var(--pine-letter-spacing);
  min-height: var(--pds-input-field-min-height);
  min-width: var(--pine-dimension-none);
  padding: var(--pds-input-padding-y) var(--pds-input-padding-x);
  transition: border-color var(--pine-motion-duration-base) ease;
  width: 100%;
}
.pds-input__field:hover:not(:disabled) {
  border-color: var(--pds-input-border-color-hover);
}
.pds-input__field:disabled {
  background: var(--pds-input-disabled-background);
  border-color: var(--pine-color-border-disabled);
  color: var(--pds-input-disabled-text-color);
  cursor: not-allowed;
}
.pds-input__field:disabled::placeholder {
  color: var(--pine-color-text-placeholder-disabled);
}
.has-error .pds-input__field:hover:not(:disabled) {
  border-color: var(--pds-input-error-border-hover);
}
:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled) {
  border-color: var(--pine-color-red-950);
}
.pds-input__field:focus-visible:not(.has-error) {
  border-color: var(--pine-color-border-active);
  outline: var(--pine-outline-focus);
  outline-offset: var(--pine-border-width);
  position: relative;
  z-index: 1;
}
:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error), :host([has-append]) .pds-input__field:focus-visible:not(.has-error), :host([has-prefix]) .pds-input__field:focus-visible:not(.has-error), :host([has-suffix]) .pds-input__field:focus-visible:not(.has-error) {
  outline-offset: var(--pine-dimension-none);
}
.pds-input__field::placeholder {
  color: var(--pds-input-placeholder-color);
}
.pds-input__field:placeholder-shown {
  text-overflow: ellipsis;
}
.has-error .pds-input__field {
  background-color: var(--pds-input-error-background);
  border-color: var(--pds-input-error-border);
}
:host-context([data-theme=dark]) .has-error .pds-input__field {
  background-color: var(--pine-color-red-950);
}
.has-error .pds-input__field:focus-visible {
  outline-color: var(--pine-color-focus-ring-danger);
  position: relative;
  z-index: 1;
}

.pds-input__error-message,
.pds-input__helper-message {
  color: var(--pine-color-text-message);
  font: var(--pine-typography-body-sm-medium);
  margin-block-end: var(--pine-dimension-none);
  margin-block-start: var(--pine-dimension-2xs);
}

.pds-input__error-message {
  color: var(--pds-input-error-color);
  display: flex;
  gap: var(--pine-dimension-2xs);
}
.pds-input__error-message pds-icon {
  margin-block-start: var(--pine-dimension-025);
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.pds-input__field::-webkit-search-cancel-button {
  appearance: none;
  background-color: var(--pds-input-placeholder-color);
  cursor: pointer;
  height: var(--pine-dimension-sm);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
  mask-size: contain;
  width: var(--pine-dimension-sm);
}