@layer component.layout {
  .bit {
    margin: var(--form-gap, 1rem) 0;
  }

  .bit__label {
    margin-bottom: 0.5rem;
  }

  .bit__desc {
    margin-top: 0.5rem;
  }

  .bit__input {
    > input,
    > textarea,
    > select {
      padding: var(--bit-input-padding, 1rem);
    }
    > select {
      padding-inline-end: 2.5em;
    }
  }

  .bit__prefix {
    padding-block: 1rem;
    padding-inline: 1rem 0.5rem;
  }

  .bit__suffix {
    padding-block: 1rem;
    padding-inline: 0.5rem 1rem;
  }

  .bit__type {
    aspect-ratio: 1/1;
  }
}