.input-field {
  cursor: text;
  overflow: hidden;

  &:has(input:focus-visible) {
    outline: none;
    border-color: var(--brand-primary-blue-700-main);

    /* outline-border-2px-blue-focused  */
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--Brand-Primary-Blue-500);
  }
  & input {
    display: block;
    border: 0;
    padding: 0;
    outline: unset;
    background-color: transparent;
    appearance: none;
    width: 100%;
    height: 24px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height var(--transition-duration) var(--transition-timing-function),
      opacity var(--transition-duration) var(--transition-timing-function);
  }

  &.focused input,
  &.filled input {
    max-height: 24px;
    opacity: 1;
    transition-delay: 0ms;
  }
}

.form-field__label {
  transition: font-size var(--transition-duration)
    var(--transition-timing-function);

  .input-field:has(input:focus-visible) &,
  .input-field.filled & {
    /* text-caption1 */
    font-size: var(--caption1-font-size);
    line-height: var(--caption1-line-height);
    letter-spacing: var(--caption1-letter-spacing);
  }
}

.input-field__icon-group {
  transition: margin var(--transition-duration)
    var(--transition-timing-function);

  .input-field:has(input:focus-visible) &,
  .input-field.filled & {
    margin-top: 20px;
  }
}
.input-field__icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--Brand-Gray-500);
  appearance: none;
  padding: 0;
  outline: none;
  border: none;
  background-color: unset;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: var(--Brand-Gray-30);
  }
  &:focus-visible {
    outline: 1px solid var(--Brand-Primary-Blue-500);
    outline-offset: 2px;
  }
}

.input-field__icon--clear {
  visibility: hidden;

  .filled & {
    visibility: visible;
  }
}