.x-control {
  --x-control-start: calc(var(--x-control-icon-count-start, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));
  --x-control-end: calc(var(--x-control-icon-count-end, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));

  &:has(textarea) {
    :where(.me-auto),
    :where(.ms-auto) {
      align-self: start;
    }
  }

  &:has(.me-auto) {
    --x-control-padding-inline-start: calc(var(--x-control-start) + var(--x-control-padding-inline));
  }

  &:has(.ms-auto) {
    --x-control-padding-inline-end: calc(var(--x-control-end) + var(--x-control-padding-inline));
  }

  &:has(.me-auto > *:nth-child(2)) {
    --x-control-icon-count-start: 2;
  }

  &:has(.ms-auto > *:nth-child(2)) {
    --x-control-icon-count-end: 2;
  }

  :where(.me-auto),
  :where(.ms-auto) {
    gap: var(--x-control-icon-gap);
    display: flex;
    align-items: center;
  }
}