.x-control:has(select:not([multiple])) {
  select {
    &,
    &::picker(select) {
      appearance: base-select;
    }

    &::picker-icon {
      display: none;
    }

    &::picker(select) {
      border-radius: var(--x-control-select-picker-border-radius);
      border:
        var(--x-control-select-picker-border-width) solid
        color-mix(
          in var(--x-control-select-picker-border-color-space, srgb),
          var(--x-control-select-picker-border-color) var(--x-control-select-picker-border-color-opacity, 15%),
          var(--x-control-select-picker-border-color-mix, transparent)
        );
      background-color: var(--x-control-select-picker-background-color);
      margin-block: var(--x-control-select-picker-margin-block);
      padding-block: var(--x-control-select-picker-padding-block);
      padding-inline: var(--x-control-select-picker-padding-inline);
      gap: var(--x-control-select-picker-gap);
      scrollbar-color: var(--x-control-select-picker-scrollbar-color);
      transition-property: var(--x-control-select-picker-transition-property, var(--default-transition-property));
      transition-duration: var(--x-control-select-picker-transition-duration, var(--default-transition-duration));
      transition-timing-function: var(--x-control-select-picker-transition-timing-function, var(--ease-in-out));
      transition-behavior: allow-discrete;
      will-change: var(--x-control-select-picker-will-change, transform, opacity);
      display: flex;
      flex-direction: column;
      cursor: auto;
      transform-origin: top center;
      scrollbar-width: thin;
      color: inherit;
    }

    &:not(:open)::picker(select) {
      opacity: var(--x-control-select-picker-closed-opacity, 0%);
      transform: var(--x-control-select-picker-closed-transform, scale(0.9));
      display: revert;
    }

    &:open::picker(select) {
      opacity: var(--x-control-select-picker-open-opacity, revert);
      transform: var(--x-control-select-picker-open-transform, revert);

      @starting-style {
        opacity: var(--x-control-select-picker-closed-opacity, 0%);
        transform: var(--x-control-select-picker-closed-opacity, scale(0.9));
      }
    }

    option {
      padding-block: var(--x-control-select-option-padding-block);
      padding-inline: var(--x-control-select-option-padding-inline);
      font-size: var(--x-control-select-option-font-size);
      font-weight: var(--x-control-select-option-font-weight);
      line-height: var(--x-control-select-option-line-height);
      border-radius: var(--x-control-select-option-border-radius);
      transition: var(--transition-background), var(--transition-color);

      &::checkmark {
        display: none;
      }

      &:hover,
      &:focus-visible {
        background-color: var(--x-control-select-option-hocus-background-color);
      }

      &:checked {
        color: var(--x-control-select-option-checked-color, var(--color-accent));
        background-color:
          color-mix(
            in var(--x-control-select-option-checked-background-color-space, srgb),
            var(--x-control-select-option-checked-background-color, var(--color-accent)) var(--x-control-select-option-checked-background-color-opacity, 10%),
            var(--x-control-select-option-checked-background-color-mix, transparent)
          );
      }
    }
  }
}