radicall/resources/css/Client/ui/input.css

.ui-input-wrapper {
  @apply w-full;
}

.ui-input-label {
  @apply block text-sm font-medium !text-dominant-700 mb-2;
}

.ui-input-required-indicator {
  @apply text-red-500 ml-1;
}

.ui-input-error-message {
  @apply text-red-500 text-sm mt-1 block;
}

.ui-input-hint-message {
  @apply !text-dominant-700 text-sm mt-1 block;
}

.ui-input .p-inputtext {
  @apply transition-all py-3 duration-200 ease-in-out w-full !border-dominant-500 !text-dominant-700 pt-3.5 !text-sm !bg-transparent;
  border-radius: 8px;
  line-height: 1.5;
  font-size: 13px;
  font-weight: 400;
}

.ui-input .p-inputtext:focus {
  @apply outline-none !border-dominant-700;
}

.ui-input .p-inputtext:hover {
  @apply border-dominant-200;
}

.ui-input .p-inputtext.p-disabled {
  @apply !cursor-not-allowed !bg-none;
}

.ui-input--filled .p-inputtext:focus {
  @apply bg-white !border-dominant-700;
}

.ui-input--error .p-inputtext:focus {
  box-shadow: 0 0 0 2px rgb(239 68 68 / 0.2) !important;
}

.ui-input-with-prefix {
  @apply relative;
}

.ui-input-prefix {
  @apply absolute top-1/2 transform -translate-y-1/2 z-10 !text-dominant-200 text-sm !font-light;
  pointer-events: none;
}

.ui-input-with-prefix .p-inputtext {
  @apply pr-10 !text-dominant-200;
}

.ui-input-wrapper-border {
  @apply flex items-center border border-dominant-500 rounded-lg overflow-visible;
  transition: all 0.2s ease-in-out;
}

.ui-input-wrapper-border:focus-within {
  @apply outline-none !border-dominant-700;
}

.ui-input-wrapper-border:hover {
  @apply border-dominant-500;
}

.ui-input-prefix-start,
.ui-input-prefix-end {
  @apply text-sm px-2 !font-normal text-dominant-200;
  pointer-events: none;
}

.ui-input-icon-start,
.ui-input-icon-end {
  @apply text-lg px-2 text-dominant-700;
  pointer-events: none;
}
.ui-input-icon-end.has-svg {
  @apply !text-dominant-700 ;
}
.ui-input-icon-start.has-svg {
  @apply !text-dominant-700 !w-10 !h-10 leading-10;
}

.ui-input-icon-end.has-svg , .ui-input-icon-start.has-svg {
  @apply !flex h-full items-center justify-center;
}
.ui-input-icon-end.has-svg svg , .ui-input-icon-start.has-svg svg {
  @apply !w-6 !h-6;
}

:has(.ui-input-icon-start) .ui-input-icon-start {
    @apply !ps-4 !pe-0;
}

:has(.ui-input-icon-end) .ui-input-icon-end {
    @apply pe-4;
}

.ui-input-wrapper-border .p-inputtext {
  @apply flex-1 border-0 shadow-none px-3;
}

.ui-input--ltr {
  @apply text-left;
}

.ui-input--ltr .ui-input-label {
  @apply text-left;
}

.ui-input--ltr .ui-input-prefix {
  @apply left-3 right-auto;
}

.ui-input--ltr.ui-input-with-prefix .p-inputtext {
  @apply ps-10 pe-3;
}

.ui-input--ltr .p-inputtext {
  @apply text-left;
}

.ui-input--ltr .ui-input-prefix-left {
  @apply left-3 right-auto !text-dominant-200;
}

.ui-input--ltr .ui-input-prefix-right {
  @apply right-3 left-auto !text-dominant-200;
}

.ui-input--ltr .ui-input-icon-left {
  @apply left-3 right-auto;
}

.ui-input--ltr .ui-input-icon-right {
  @apply right-3 left-auto;
}

.ui-input--ltr.ui-input-with-prefixes .p-inputtext {
  @apply ps-10 pe-10;
}

.ui-input--ltr .p-inputtext {
  @apply text-left;
}

.ui-input--ltr.ui-input-wrapper-border {
  @apply flex-row;
}

.ui-input--rtl {
  @apply text-right;
}

.ui-input--rtl .ui-input-label {
  @apply text-right;
}

.ui-input--rtl .p-inputtext {
  @apply text-right;
}

.ui-input--rtl.ui-input-wrapper-border {
  @apply flex-row-reverse;
}

.ui-input-password-toggle {
  @apply text-lg px-4 text-dominant-700 transition-all duration-200 ease-in-out;
}

.ui-input-password-toggle:hover {
  @apply text-dominant-900;
}

.ui-input-with-password-toggle .p-inputtext {
  @apply pl-2;
}

.ui-input--ltr.ui-input-with-password-toggle .p-inputtext {
  @apply !pr-6;
}