@layer components {
  .input-group__prefix {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding-inline: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 3);
  }

  .input-group__prefix--is-disabled {
    opacity: var(--opacity-disabled);
  }

  .input-group__suffix {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding-inline: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 3);
  }

  .input-group__suffix--is-disabled {
    opacity: var(--opacity-disabled);
  }
}