.aip-select {
    display: block;
    font-size: calc(16 / 16 * 1rem);
    line-height: 1.3;
    color: var(--text-primary);
    background-color: var(--color-white);
    border: 1px solid var(--color-opacity-gray200);
    border-radius: calc(8 / 16 * 1rem);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%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 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right calc(8 / 16 * 1rem) center;
    background-repeat: no-repeat;
    background-size: calc(16 / 16 * 1rem) calc(16 / 16 * 1rem);
    padding: calc(10 / 16 * 1rem);
    padding-right: calc(32 / 16 * 1rem);
}

.aip-select:hover {
    border-color: var(--color-opacity-gray300);
}

.aip-select:focus {
    box-sizing: border-box;
    outline: 0;
    box-shadow: 0 0 0 0.15rem var(--color-focus);
}

.aip-select:disabled {
    background-color: var(--color-opacity-gray100);
    color: var(--color-opacity-gray400);
    cursor: not-allowed;
    opacity: 0.6;
}

.aip-select:disabled:hover {
    border-color: var(--color-opacity-gray200);
}

.aip-select[data-type="error"] {
    border-color: var(--color-alert);
}

.aip-select[data-type="error"]:hover {
    border-color: var(--color-alert);
}

.aip-select[data-type="error"]:focus {
    border-color: var(--color-alert);
    box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-alert);
}

.aip-select:is(:user-invalid, [aria-invalid="true"]) {
    border-color: var(--color-alert);
    background-color: var(--color-white);
}

.aip-select option {
    background-color: var(--color-white);
    color: var(--text-primary);
    padding: calc(10 / 16 * 1rem);
}

.aip-select option:hover {
    background-color: var(--color-opacity-gray100);
}

.aip-select option[value=""] {
    color: var(--color-opacity-gray400);
}