.x-select {
  -webkit-user-select: none;
  user-select: none;
  vertical-align: top;
  appearance: none;
  font-family: var(--default-font-family);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: var(--cursor-button);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--select-chevron-inset) center;
  background-size: var(--select-chevron-size) var(--select-chevron-size);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  display: inline-flex;
  overflow: hidden;
}

.x-select:where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: -1px;
}

.x-select:where([data-size="1"]) {
  --select-chevron-size: 9px;
  --select-chevron-inset: var(--space-2);
  gap: var(--space-1);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
  border-radius: max(var(--radius-1), var(--radius-pill));
}

.x-select:where([data-size="1"]):where(:not([data-variant="text"])) {
  padding-block: calc((var(--space-5) - var(--line-height-1)) / 2);
  padding-inline-start: var(--space-2);
  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + var(--space-1));
}

.x-select:where([data-size="1"]):where([data-variant="text"]) {
  --select-text-padding-x: var(--space-2);
  --select-text-padding-y: var(--space-1);
}

.x-select:where(:not([data-size]), [data-size="2"]) {
  --select-chevron-size: 9px;
  --select-chevron-inset: var(--space-3);
  gap: calc(var(--space-1) * 1.5);
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-2);
  border-radius: max(var(--radius-2), var(--radius-pill));
}

.x-select:where(:not([data-size]), [data-size="2"]):where(:not([data-variant="text"])) {
  padding-block: calc((var(--space-6) - var(--line-height-2)) / 2);
  padding-inline-start: var(--space-3);
  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + var(--space-1));
}

.x-select:where(:not([data-size]), [data-size="2"]):where([data-variant="text"]) {
  --select-text-padding-x: var(--space-2);
  --select-text-padding-y: var(--space-1);
}

.x-select:where([data-size="3"]) {
  --select-chevron-size: 11px;
  --select-chevron-inset: var(--space-4);
  gap: var(--space-2);
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  letter-spacing: var(--letter-spacing-3);
  border-radius: max(var(--radius-3), var(--radius-pill));
}

.x-select:where([data-size="3"]):where(:not([data-variant="text"])) {
  padding-block: calc((var(--space-7) - var(--line-height-3)) / 2);
  padding-inline-start: var(--space-4);
  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + var(--space-2));
}

.x-select:where([data-size="3"]):where([data-variant="text"]) {
  --select-text-padding-x: var(--space-3);
  --select-text-padding-y: calc(var(--space-1) * 1.5);
}

.x-select:where([data-variant="text"]) {
  box-sizing: content-box;
  height: fit-content;
  padding: var(--select-text-padding-y) var(--select-text-padding-x);
  --margin-top: 0px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-top-override: calc(var(--margin-top) - var(--select-text-padding-y));
  --margin-right-override: calc(var(--margin-right) - var(--select-text-padding-x));
  --margin-bottom-override: calc(var(--margin-bottom) - var(--select-text-padding-y));
  --margin-left-override: calc(var(--margin-left) - var(--select-text-padding-x));
  margin: var(--margin-top-override) var(--margin-right-override)
    var(--margin-bottom-override) var(--margin-left-override);
  padding-inline-end: calc(var(--select-chevron-inset) + var(--select-chevron-size) + var(--space-1));
}

.x-select:where(:not([data-variant]), [data-variant="surface"]) {
  color: var(--neutral-12);
  box-shadow: inset 0 0 0 1px var(--neutral-a7);
  background-color: #0000;
}

@media (hover: hover) {
  .x-select:where(:not([data-variant]), [data-variant="surface"]):where(:hover) {
    box-shadow: inset 0 0 0 1px var(--neutral-a8);
  }
}

.x-select:where(:not([data-variant]), [data-variant="surface"]):where(:disabled) {
  color: var(--neutral-a11);
  background-color: var(--neutral-a2);
  box-shadow: inset 0 0 0 1px var(--neutral-a6);
}

.x-select:where([data-variant="soft"]) {
  color: var(--accent-12);
  background-color: var(--accent-a3);
}

@media (hover: hover) {
  .x-select:where([data-variant="soft"]):where(:hover) {
    background-color: var(--accent-a4);
  }
}

.x-select:where([data-variant="soft"]):where(:focus-visible) {
  outline-color: var(--accent-8);
}

.x-select:where([data-variant="soft"]):where(:disabled) {
  color: var(--neutral-a11);
  background-color: var(--neutral-a3);
}

.x-select:where([data-variant="text"]) {
  color: var(--accent-12);
}

@media (hover: hover) {
  .x-select:where([data-variant="text"]):where(:hover) {
    background-color: var(--accent-a3);
  }
}

.x-select:where([data-variant="text"]):where(:disabled) {
  color: var(--neutral-a11);
  background-color: #0000;
}