integreat/resources/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.htmx-added .fade-in {
    opacity: 0.0 !important;
}

.htmx-added.fade-in {
    opacity: 0.0 !important;
}
.fade-in {
    opacity: 1.0;
}

.htmx-settling .fade-in-settle {
    opacity: 0.0 !important;
}

.htmx-settling.fade-in-settle {
    opacity: 0.0 !important;
}

.fade-in-settle {
    opacity: 1.0;
}


.htmx-settling .slide-up-settle {
    @apply translate-y-5 !important;
}

.htmx-settling.slide-up-settle {
    @apply translate-y-5 !important;
}

.slide-up-settle {
    @apply translate-y-0;
}

.htmx-added .slide-up {
    @apply translate-y-5 !important;
}
.hidden .slide-up {
    @apply translate-y-5 !important;
}
.slide-up {
    @apply translate-y-0;
}

.live-added {
    animation: pulse-green 300ms 2;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.dark .live-added {
    animation: pulse-dark-green 300ms 2 !important;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
/*
.live-added {
    @apply bg-white;
}
*/

@keyframes pulse-green {
    0% { @apply bg-white; }
    100% { @apply bg-green-300 dark:bg-red-700;}
}

@keyframes pulse-dark-green {
    0% { @apply dark:bg-gray-700; }
    100% { @apply bg-green-700;}
}


.htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
    display: inherit !important;
}
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator-hidden {
    display: none !important;
}

.htmx-indicator-hidden {
    display: inherit;
}

.htmx-swapping .fade-out {
    opacity: 0.0 !important;
}
.fade-out {
    opacity: 1.0;
}

.min-h-content {
    min-height: calc(100vh - 4em);
}


.choices {
    @apply border-0 mb-0 !important;
}
.choices__list--multiple {
}
.choices__inner {
    @apply  bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:bg-gray-700 p-1 group-[.has-error]:bg-red-50 group-[.has-error]:border-red-500 group-[.has-error]:text-red-900 group-[.has-error]:placeholder-red-700 group-[.has-error]:focus:ring-red-500 group-[.has-error]:dark:bg-gray-700 group-[.has-error]:focus:border-red-500 group-[.has-error]:dark:text-red-500 group-[.has-error]:dark:placeholder-red-500 group-[.has-error]:dark:border-red-500 !important;
}

.choices:focus-within .choices__inner {
    @apply  ring-blue-500 border-blue-500 dark:ring-blue-500 dark:border-blue-500 !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #007dbb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: #007dbb;
}

.choices__inner .choices__input {
    @apply  m-0 bg-gray-50 dark:bg-gray-700 dark:text-white !important;
}

.choices__inner .choices__item {
    @apply   bg-green-300 text-green-800 dark:bg-green-900 dark:text-green-300   text-xs font-medium px-2 py-0.5 rounded whitespace-nowrap border-gray-400 !important;
}
.choices__list--dropdown {
    @apply  bg-white rounded-lg shadow dark:bg-gray-700 !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    @apply   bg-green-300 text-green-800 dark:bg-green-900 dark:text-green-300 !important;
}

.choices[data-type*="select-multiple"] .choices__button {
    @apply   border-gray-500 focus:ring-blue-500 focus:border-blue-500 !important;
    
}

.choices__inner .choices__item:focus-within {
    @apply  bg-green-500 border-gray-500 ring-blue-500 border-blue-500 !important;
    
}
.choices__list--single .choices__item {
    @apply w-auto flex !important;
}
.choices__list--single {
    @apply w-auto !important;
    
}

.choices__list--single button {
    @apply block relative m-0 h-auto !important;
    
}

.choices[data-type*="select-one"] .choices__button {
    right:auto !important;
}