.ui-select-wrapper { @apply !mb-4 relative overflow-visible w-full; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .p-select { @apply !bg-transparent truncate; } .ui-select-label { @apply block text-sm font-medium !text-dominant-700 mb-2; } .ui-select-required-indicator { @apply text-red-500 ml-1; } .ui-select-error-message { @apply text-red-500 text-sm mt-1 block; } .ui-select-hint-message { @apply !text-dominant-700 text-sm mt-1 block; } .ui-select-dropdown { @apply !w-full !border-none !h-12; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } .ui-select-wrapper-border { @apply flex items-center border border-dominant-500 rounded-lg overflow-visible; transition: all 0.2s ease-in-out; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } .ui-select-wrapper-border:focus-within { @apply outline-none !border-dominant-700; } .ui-select-wrapper-border:hover { @apply border-dominant-500; } .ui-select-prefix-start, .ui-select-prefix-end { @apply text-sm px-2 !font-normal text-dominant-200; pointer-events: none; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } .ui-select-icon-start, .ui-select-icon-end { @apply text-lg px-2 text-dominant-700; pointer-events: none; } .ui-select-icon-start { @apply ps-0; } .ui-select-icon-end { @apply pe-0; } .ui-select-wrapper-border .p-dropdown { @apply !flex-1 !border-0 !shadow-none !px-0; } .ui-select-wrapper-border .p-dropdown .p-dropdown-label { @apply !py-3 !text-dominant-700 !text-sm; line-height: 1.5; font-size: 13px; font-weight: 400; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } .ui-select-wrapper-border .p-dropdown .p-dropdown-trigger { @apply !text-dominant-700 !border-none; } .ui-select-wrapper-border .p-dropdown:focus { @apply !outline-none !border-dominant-700; } .ui-select-wrapper-border .p-dropdown:hover { @apply !border-dominant-200; } .ui-select-wrapper-border .p-dropdown.p-disabled { @apply !opacity-50 !cursor-not-allowed; } .ui-select--ltr { @apply text-left; } .ui-select--ltr .ui-select-label { @apply text-left; } .ui-select--ltr .p-dropdown { @apply text-left; } .ui-select--ltr.ui-select-wrapper-border { @apply flex-row; } .ui-select--rtl { @apply text-right; } .ui-select--rtl .ui-select-label { @apply text-right; } .ui-select--rtl .p-dropdown { @apply text-right; } .ui-select--rtl.ui-select-wrapper-border { @apply flex-row-reverse; } .p-select-overlay { @apply absolute !shadow-none bg-white overflow-y-hidden border !border-dominant-100 rounded-xl z-[9999] overflow-visible pb-1; transform-origin: top center; width: auto !important; min-width: auto !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } .p-select-overlay .p-dropdown-items .p-dropdown-item { @apply w-full flex items-center content-center gap-1 text-sm bg-transparent border-0 cursor-pointer transition-all duration-300 mb-3 relative; animation: itemFadeIn 0.3s ease-out; animation-fill-mode: both; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(1) { animation-delay: 0.05s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(2) { animation-delay: 0.1s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(3) { animation-delay: 0.15s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(4) { animation-delay: 0.2s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(5) { animation-delay: 0.25s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(6) { animation-delay: 0.3s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(7) { animation-delay: 0.35s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(8) { animation-delay: 0.4s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(9) { animation-delay: 0.45s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:nth-child(10) { animation-delay: 0.5s; } .p-select-overlay .p-dropdown-items .p-dropdown-item:hover { @apply text-dominant-700 relative flex items-center content-center h-[1.8rem]; animation: selectedItemPulse 0.3s ease-out; } .p-select-overlay .p-dropdown-items .p-dropdown-item.p-highlight { @apply text-dominant-700 relative flex items-center content-center h-[1.8rem]; animation: selectedItemPulse 0.3s ease-out; } .p-select-overlay .p-dropdown-items .p-dropdown-item.p-highlight::before { content: ''; @apply rounded-l-2xl flex items-center justify-center w-1 h-[1.6rem] bg-dominant-500; z-index: 1; } .p-select-overlay .p-dropdown-items .p-dropdown-item.p-highlight::after { content: ''; @apply absolute top-1/2 !right-0 w-2 h-2 bg-dominant-500 rounded-full; transform: translateY(-50%); z-index: 2; } .p-select-header { @apply p-3; } .p-select-list-container { @apply max-h-60 overflow-y-auto relative pl-4 pr-2; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } .p-select-list-container::-webkit-scrollbar { width: 6px; } .p-select-list-container::-webkit-scrollbar-track { background: transparent; border-radius: 3px; } .p-select-list-container::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; transition: background 0.2s ease; } .p-select-list-container::-webkit-scrollbar-thumb:hover { background: #9ca3af; } .p-select-list-container .p-dropdown-items .p-dropdown-item { @apply w-full flex items-center content-center gap-1 text-sm bg-transparent border-0 cursor-pointer transition-all duration-300 mb-3 relative; animation: itemFadeIn 0.3s ease-out; animation-fill-mode: both; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(1) { animation-delay: 0.05s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(2) { animation-delay: 0.1s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(3) { animation-delay: 0.15s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(4) { animation-delay: 0.2s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(5) { animation-delay: 0.25s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(6) { animation-delay: 0.3s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(7) { animation-delay: 0.35s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(8) { animation-delay: 0.4s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(9) { animation-delay: 0.45s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:nth-child(10) { animation-delay: 0.5s; } .p-select-list-container .p-dropdown-items .p-dropdown-item:hover { @apply text-dominant-700 relative flex items-center content-center h-[1.8rem]; animation: selectedItemPulse 0.3s ease-out; } .p-select-list-container .p-dropdown-items .p-dropdown-item.p-highlight { @apply text-dominant-700 relative flex items-center content-center h-[1.8rem]; animation: selectedItemPulse 0.3s ease-out; } .p-select-list-container .p-dropdown-items .p-dropdown-item.p-highlight::before { content: ''; @apply rounded-l-2xl flex items-center justify-center w-1 h-[1.6rem] bg-dominant-500; z-index: 1; } .p-select-list-container .p-dropdown-items .p-dropdown-item.p-highlight::after { content: ''; @apply absolute top-1/2 !right-0 w-2 h-2 bg-dominant-500 rounded-full; transform: translateY(-50%); z-index: 2; } .ui-select-wrapper.has-error .ui-select-wrapper-border { @apply border-red-500; } .ui-select-wrapper.has-error .p-dropdown { @apply border-red-500; } .ui-select-wrapper .p-dropdown .p-dropdown-clear-icon { @apply hidden; } .ui-select-wrapper .p-dropdown .p-dropdown-trigger-icon { @apply !text-dominant-700; } .ui-select-wrapper .p-dropdown .p-dropdown-filter { @apply w-full text-sm !font-normal border border-dominant-200 rounded px-3 !h-[2.2rem] focus:outline-none focus:ring-2 focus:ring-dominant-500 focus:border-transparent placeholder:!text-dominant-200 !text-dominant-700 !bg-white; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: searchInputSlideIn 0.5s ease-out; } .p-select-overlay .p-dropdown-filter { @apply !w-full text-sm !font-normal border border-dominant-200 rounded px-3 !pb-2.5 focus:outline-none focus:ring-2 focus:ring-dominant-500 focus:border-transparent placeholder:!text-dominant-200 !text-dominant-700 !bg-white; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: searchInputSlideIn 0.5s ease-out; } .ui-select-wrapper .p-dropdown .p-dropdown-filter:focus { @apply shadow-none border-0; } .p-select-label{ @apply !text-dominant-700 !text-sm leading-8; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; } .p-iconfield input{ @apply !text-dominant-700 !bg-dominant-50 !text-[12px] leading-8 !border-none !h-9 mt-1 mb-1 placeholder:!text-dominant-200; } .p-iconfield .p-icon{ @apply !text-dominant-500/70; } .p-select-list-container{ @apply px-0 } .p-select-list-container ul li{ @apply !text-dominant-700 !text-[12px] hover:!bg-transparent; } .p-select-list-container ul li.p-select-option.p-select-option-selected{ @apply !text-dominant-700 !text-[12px] hover:!bg-transparent !bg-transparent relative ; } .p-select-list-container ul li.p-select-option.p-select-option-selected::before { content: ''; @apply rounded-r-2xl flex items-center justify-center w-1 h-[1.2rem] bg-dominant-500 ml-1; z-index: 1; } .p-select-list-container ul li.p-select-option.p-select-option-selected::after { content: ''; @apply absolute top-1/2 !left-4 w-2 h-2 bg-dominant-500 rounded-full; transform: translateY(-50%); z-index: 2; } @keyframes itemFadeIn { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } } @keyframes selectedItemPulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes searchInputSlideIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }