select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    background-color: var(--sys-color-background-surface);
    color: var(--sys-color-text-primary);
    transition: var(--transition-speed-fast);
    width: 100%;
    border: 1px solid var(--color-gray-100);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right var(--spacing-sm) center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-right: calc(var(--spacing-sm) + 1.5rem);
}   

select:focus {
    border: 1px solid var(--sys-color-interactive);
    outline: none;
    box-shadow: 0 0 0 2px var(--sys-color-interactive);
}