vue3-multilang-country-selector/lib/style.css

A Vue 3 multilingual country selector component with internationalization, search and customization options | Vue 3 多语言国家选择器组件，支持国际化、搜索和自定义选项

.country-selector[data-v-bf45e9c6]{position:relative;display:inline-block;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.country-selector--disabled[data-v-bf45e9c6]{opacity:.6;cursor:not-allowed}.country-selector__input-wrapper[data-v-bf45e9c6]{cursor:pointer}.country-selector--disabled .country-selector__input-wrapper[data-v-bf45e9c6]{cursor:not-allowed}.country-selector__input[data-v-bf45e9c6]{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;transition:border-color .2s,box-shadow .2s}.country-selector__input[data-v-bf45e9c6]:hover{border-color:#9ca3af}.country-selector__input[data-v-bf45e9c6]:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.country-selector--small .country-selector__input[data-v-bf45e9c6]{padding:6px 10px;font-size:14px}.country-selector--large .country-selector__input[data-v-bf45e9c6]{padding:12px 16px;font-size:16px}.country-selector__selected[data-v-bf45e9c6],.country-selector__placeholder[data-v-bf45e9c6]{display:flex;align-items:center;gap:8px;flex:1}.country-selector__placeholder[data-v-bf45e9c6]{color:#9ca3af}.country-selector__flag[data-v-bf45e9c6]{font-size:1.2em}.country-selector__name[data-v-bf45e9c6]{flex:1}.country-selector__dial-code[data-v-bf45e9c6]{color:#6b7280;font-size:.9em}.country-selector__actions[data-v-bf45e9c6]{display:flex;align-items:center;gap:4px}.country-selector__clear[data-v-bf45e9c6]{background:none;border:none;font-size:18px;color:#9ca3af;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.country-selector__clear[data-v-bf45e9c6]:hover{background-color:#f3f4f6;color:#374151}.country-selector__arrow[data-v-bf45e9c6]{color:#9ca3af;font-size:12px;transition:transform .2s}.country-selector__arrow--open[data-v-bf45e9c6]{transform:rotate(180deg)}.country-selector__dropdown[data-v-bf45e9c6]{position:absolute;top:100%;left:0;right:0;z-index:1000;background:white;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a;margin-top:4px;max-height:300px;overflow:hidden}.country-selector__search[data-v-bf45e9c6]{padding:8px;border-bottom:1px solid #e5e7eb;box-sizing:border-box}.country-selector__search-input[data-v-bf45e9c6]{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;outline:none;box-sizing:border-box}.country-selector__search-input[data-v-bf45e9c6]:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.country-selector__options[data-v-bf45e9c6]{max-height:250px;overflow-y:auto}.country-selector__option[data-v-bf45e9c6]{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;transition:background-color .2s}.country-selector__option[data-v-bf45e9c6]:hover{background-color:#f3f4f6}.country-selector__option--selected[data-v-bf45e9c6]{background-color:#eff6ff;color:#1d4ed8}.country-selector__no-results[data-v-bf45e9c6]{padding:16px;text-align:center;color:#9ca3af;font-style:italic}.country-selector-dropdown-enter-active[data-v-bf45e9c6],.country-selector-dropdown-leave-active[data-v-bf45e9c6]{transition:opacity .2s,transform .2s}.country-selector-dropdown-enter-from[data-v-bf45e9c6],.country-selector-dropdown-leave-to[data-v-bf45e9c6]{opacity:0;transform:translateY(-8px)}