.select {
    margin-bottom: var(--space-half);
    position: relative;
    width: 100%;
}

.select label {
    display: block;
    margin-bottom: var(--space-quarter);
    text-align: left;
}

.select select {
    appearance: none;
    background-color: var(--background-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-labelledby='chevron down' color='%23777'%3E%3Cdefs/%3E%3Cpolyline points='6 10 12 16 18 10'/%3E%3C/svg%3E%0A");
    background-position: calc(100% - 12px);
    background-repeat: no-repeat;
    border: solid 1px var(--background-quaternary);
    border-radius: 2px;
    color: var(--color-default);
    font-family: var(--font-family);
    font-size: var(--size-default);
    font-weight: 400;
    height: 52px;
    padding: 0 var(--space-half);
    width: 100%;
}

.select select[disabled] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-labelledby='chevron down' color='%23ccc'%3E%3Cdefs/%3E%3Cpolyline points='6 10 12 16 18 10'/%3E%3C/svg%3E%0A");
}

/* on macOS this definition has no effect as the dropdown is rendered by the OS */
.select option {
    background-color: var(--background-secondary);
    color: var(--color-default);
    padding: var(--spacing-default);
    width: 100%;
}

.select option[disabled] {
    color: var(--color-disabled);
}
