@value globals: "../../styles/globals.css";
@value inputContainerHeight, inputExpandedHeight from globals;

.container {
  align-content: center;
  background-color: var(--Surface-Primary-Default);
  border: 1px solid var(--Border-Interactive-Default);
  border-radius: var(--Corner-radius-md);
  display: grid;
  min-width: 0; /* allow shrinkage */
  height: inputContainerHeight;
  padding: 0 var(--Space-x15);
  box-sizing: border-box;
  cursor: text;

  &:has(.input:focus) {
    outline-offset: -2px;
    outline: 2px solid var(--Border-Interactive-Focus);
  }

  &:has(.input:disabled) {
    background-color: var(--Surface-Primary-Disabled);
    border: transparent;
    cursor: unset;
  }

  &:has(.input[data-invalid='true'], .input[aria-invalid='true']) {
    border-color: var(--Border-Interactive-Error);

    &:focus-within {
      outline-offset: -2px;
      outline: 2px solid var(--Border-Interactive-Error);
    }
  }
}

.input {
  background: none;
  border: none;
  color: var(--Text-Default);
  height: 1px;
  order: 2;
  padding: 0;
  transition: height 150ms ease;

  &:focus,
  &:placeholder-shown,
  &[value]:not([value='']) {
    height: inputExpandedHeight;
    outline: none;
  }

  &:disabled {
    color: var(--Text-Interactive-Disabled);
  }
}

@media (hover: hover) {
  .input:active:not(:disabled) {
    height: inputExpandedHeight;
    outline: none;
  }
}