radicall/resources/css/Client/ui/select.css

.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);
  }
}