@layer component.base {
  .bit__input {
    display: grid;
    grid-template:
      "prefix element suffix" auto
      "bottom bottom bottom" auto /
      auto 1fr auto;
    position: relative;
    > input,
    > textarea,
    > select {
      border: none;
      background: transparent;
      outline: 0;
      min-width: 0;
      grid-area: element;
    }

    > select {
      appearance: none;
      color: inherit;
    }
  }

  .bit__prefix {
    white-space: nowrap;
    grid-area: prefix;
  }

  .bit__suffix {
    white-space: nowrap;
    grid-area: suffix;
  }

  .bit__type {
    pointer-events: none;
    display: flex;
    position: absolute;
    inset: 0 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}