.x-control:has(select:not([multiple])) {
  --x-control-padding-inline-end: calc(var(--x-control-end) + var(--x-control-padding-inline) + var(--x-control-select-icon-margin-inline-end));

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

  &::after {
    inline-size: var(--x-control-select-icon-size);
    block-size: var(--x-control-select-icon-size);
    mask: var(--x-control-select-icon-mask);
    margin-inline: auto var(--x-control-select-icon-margin-inline-end);
    transition: var(--transition-transform);
    will-change: transform;
    grid-area: x-control-padding;
    background-color: currentcolor;
    pointer-events: none;
    align-self: center;
    content: "";
  }

  &:has(select:open) {
    &::after {
      transform: var(--x-control-select-open-icon-transform, rotate(180deg));
    }
  }

  :where(.ms-auto) {
    margin-inline-end: var(--x-control-select-icon-size);
  }

  :where(select, option) {
    cursor: var(--cursor-pointer, pointer);
  }
}