void-select {
  --_ch: 1.109rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--void-space-1);
  font-family: var(--void-font-sans);
}

void-select::after {
  content: '';
  position: absolute;
  right: var(--void-space-3);
  bottom: calc(var(--_ch) - 0.375rem);
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--void-color-text-secondary);
  opacity: 0.6;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  pointer-events: none;
}

void-select select {
  width: 100%;
  padding: var(--void-space-2) var(--void-space-3);
  padding-right: var(--void-space-8);
  background: var(--void-color-bg-secondary);
  border: 1px solid var(--void-color-border);
  border-radius: var(--void-radius-md);
  color: var(--void-color-text);
  font-family: inherit;
  font-size: var(--void-text-sm);
  font-weight: var(--void-weight-normal);
  line-height: var(--void-leading-normal);
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--void-duration-fast) var(--void-ease-in-out),
              box-shadow var(--void-duration-fast) var(--void-ease-in-out),
              background var(--void-duration-fast) var(--void-ease-in-out);
}

void-select select:hover {
  border-color: var(--void-color-border-strong);
  background: var(--void-color-bg-hover);
}

void-select select:focus {
  border-color: var(--void-color-border-focus);
  box-shadow: 0 0 0 1px var(--void-color-border-focus);
}

void-select select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

void-select select option {
  background: var(--void-color-bg-elevated);
  color: var(--void-color-text);
}

void-select[error]:not([error=""]) select {
  border-color: var(--void-color-error);
}

void-select[error]:not([error=""]) select:focus {
  box-shadow: 0 0 0 1px var(--void-color-error);
}

void-select[error]:not([error=""])::after {
  bottom: calc(var(--_ch) - 0.375rem + var(--void-space-1) + 1.125rem);
}

.void-select-error {
  color: var(--void-color-error);
  font-size: var(--void-text-xs);
}

void-select[size="sm"] { --_ch: 0.8125rem; }
void-select[size="sm"] select { padding: var(--void-space-1) var(--void-space-2); padding-right: var(--void-space-6); font-size: var(--void-text-xs); }
void-select[size="sm"]::after { right: var(--void-space-2); width: 0.625rem; height: 0.625rem; }

void-select[size="lg"] { --_ch: 1.40625rem; }
void-select[size="lg"] select { padding: var(--void-space-3) var(--void-space-4); padding-right: var(--void-space-10); font-size: var(--void-text-base); }
void-select[size="lg"]::after { right: var(--void-space-4); width: 0.875rem; height: 0.875rem; }

void-select[size="xl"] { --_ch: 1.84375rem; }
void-select[size="xl"] select { padding: var(--void-space-4) var(--void-space-5); padding-right: var(--void-space-10); font-size: var(--void-text-lg); }
void-select[size="xl"]::after { right: var(--void-space-5); width: 1rem; height: 1rem; }

void-select[size="xxl"] { --_ch: 2.1875rem; }
void-select[size="xxl"] select { padding: var(--void-space-5) var(--void-space-6); padding-right: var(--void-space-10); font-size: var(--void-text-xl); }
void-select[size="xxl"]::after { right: var(--void-space-6); width: 1.125rem; height: 1.125rem; }