.input-component-container {
  display: flex;
  flex-direction: column;
  gap: var(--sd-spacing-base-small);
  position: relative;
  font-family: "Roobert", sans-serif;
  width: 100%;
}

.input-component-container .floating-label {
  font-size: var(--sd-ec-text-label-input-medium-fontsize);
  line-height: var(--sd-ec-text-label-input-medium-lineheight);
  letter-spacing: var(--sd-ec-text-label-input-medium-letterspacing);
  font-weight: var(--sd-ec-text-label-input-medium-fontweight);
  color: var(--sd-ec-color-neutral-060);
  position: absolute;
  top: var(--sd-spacing-base-small);
  left: var(--sd-spacing-base-medium);
  z-index: 1;
  pointer-events: none;
  display: block;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.input-component-container .floating-label.label-disabled {
  color: var(--sd-ec-color-neutral-060);
}

.input-component-container .input-wrapper {
  position: relative;
}

.input-component-container input.inputComponent {
  font-family: inherit;
  font-size: var(--sd-ec-text-paragraph-medium-fontsize);
  line-height: var(--sd-ec-text-paragraph-medium-lineheight);
  letter-spacing: var(--sd-ec-text-paragraph-medium-letterspacing);
  font-weight: var(--sd-ec-text-paragraph-medium-fontweight);
  color: var(--sd-ec-color-brand-tertiary-100);
  width: 100%;
  border-radius: var(--sd-ec-border-radius-medium);
  padding: var(--sd-spacing-base-small) var(--sd-spacing-base-medium);
  box-sizing: border-box;
  padding-top: calc(var(--sd-spacing-base-small) + var(--sd-ec-text-label-input-medium-fontsize) * var(--sd-ec-text-label-input-medium-lineheight));
  padding-right: calc(var(--sd-spacing-base-small) + var(--sd-dimension-base-large) + var(--sd-spacing-base-medium));
  border: var(--sd-ec-border-width-medium) solid var(--border-color, var(--sd-ec-color-neutral-060));
  transition: border-color 100ms ease-in;
}
.input-component-container input.inputComponent:read-only {
  cursor: default;
}
.input-component-container input.inputComponent:hover {
  border-color: var(--border-color, var(--sd-ec-color-neutral-080));
}
.input-component-container input.inputComponent:focus {
  border-color: var(--sd-ec-color-brand-secondary-100);
}
.input-component-container input.inputComponent:disabled {
  cursor: default;
  border-color: var(--sd-ec-color-neutral-020);
  background-color: var(--sd-ec-color-neutral-005);
  color: var(--sd-ec-color-neutral-060);
}
.input-component-container input.inputComponent[aria-invalid],
.input-component-container input.inputComponent.error {
  border-color: var(--sd-ec-color-service-error-100);
}
.input-component-container input.inputComponent::placeholder {
    color: transparent;
}
.input-component-container input.inputComponent:placeholder-shown ~ .floating-label {
    font-size: var(--sd-ec-font-label-m-font-size);
    line-height: var(--sd-ec-font-label-m-line-height);
    top: 1.3rem;
}

.input-component-container input.inputComponent:focus ~ .floating-label {
    line-height: var(--sd-ec-text-label-input-medium-lineheight);
    top: var(--sd-spacing-base-small);
}

.input-component-container p {
  font-size: var(--sd-ec-text-paragraph-small-fontsize);
  line-height: var(--sd-ec-text-paragraph-small-lineheight);
  letter-spacing: var(--sd-ec-text-paragraph-small-letterspacing);
  font-weight: var(--sd-ec-text-paragraph-small-fontweight);
  padding: var(--sd-dimension-base-none) calc(var(--sd-spacing-base-medium) + var(--sd-ec-border-width-medium));
  margin: var(--sd-dimension-base-none);
  color: var(--sd-ec-color-neutral-070);
}
.input-component-container p.input-error-message {
  color: var(--sd-ec-color-service-error-100);
}

.input-component-container button.input-button {
  padding: var(--sd-spacing-base-small);
  border-radius: var(--sd-ec-border-radius-rounded);
  cursor: pointer;
  border: none;
  background-color: transparent;
  position: absolute;
  right: var(--sd-spacing-base-small);
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}
.input-component-container button.input-button img {
  display: block;
  width: var(--sd-dimension-base-large);
  height: var(--sd-dimension-base-large);
  transition: filter 50ms ease-out;
}
.input-component-container button.show-password-button img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(86%) saturate(1739%) hue-rotate(193deg) brightness(95%) contrast(104%);
}
.input-component-container button.show-password-button:hover img,
.input-component-container button.copy-button:focus img {
  filter: brightness(0) saturate(100%) invert(14%) sepia(82%) saturate(7158%) hue-rotate(196deg) brightness(90%) contrast(101%);
}
.input-component-container button.show-password-button:active img {
  filter: brightness(0) saturate(100%) invert(33%) sepia(67%) saturate(1255%) hue-rotate(182deg) brightness(95%) contrast(83%);
}
.input-component-container button.delete-button img {
  filter: brightness(0) saturate(100%) invert(57%) sepia(2%) saturate(21%) hue-rotate(319deg) brightness(93%) contrast(81%);
}
.input-component-container button.delete-button:hover img,
.input-component-container button.delete-button:focus img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(81%) saturate(5%) hue-rotate(34deg) brightness(90%) contrast(84%);
}
.input-component-container button.delete-button:active img {
  filter: brightness(0) saturate(100%) invert(21%) sepia(14%) saturate(7%) hue-rotate(95deg) brightness(101%) contrast(97%);
}

.input-component-container input.inputComponent:focus,
.input-component-container button:focus {
  box-shadow: 0 0 0 0.375rem var(--sd-ec-color-state-secondary-015);
  outline: var(--sd-ec-border-width-medium) solid var(--sd-ec-color-state-secondary-120);
  outline-offset: var(--sd-ec-border-width-medium);
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}