/* alpinejs */
[x-cloak] {
  display: none;
}

/* htmx */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes slide-from-right {
  from {
    transform: translateX(90px);
  }
}
@keyframes slide-to-left {
  to {
    transform: translateX(-90px);
  }
}

.slide-it {
  animation: slide-from-right 600ms cubic-bezier(0.4, 0, 0.2, 1) both,
    fade-in 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both;
}
.slide-it.htmx-old {
  animation: slide-to-left 600ms cubic-bezier(0.4, 0, 0.2, 1) both,
    fade-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes slide-from-bottom {
  from {
    transform: translateY(90px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-to-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-90px);
  }
}

.slide-it-bottom {
  view-transition-name: slide-it-bottom;
}

::view-transition-old(slide-it-bottom) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-top;
}

::view-transition-new(slide-it-bottom) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-bottom;
}

/* Loading Indicator */

.loading-bar {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 999;
  background: linear-gradient(
    90deg,
    transparent,
    #1e3a8a,
    transparent,
    #93c5fd,
    transparent
  );
}

.htmx-request.loading-bar {
  opacity: 1;
  animation: fadeIn 0.4s linear forwards, slide 0.8s ease-in-out infinite;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Custom scrollbar styles */

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-corner {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Dark mode scrollbar styles */
.dark ::-webkit-scrollbar-corner {
  background-color: #3b3b3b;
}
.dark ::-webkit-scrollbar-track {
  background: #3b3b3b;
}
.dark ::-webkit-scrollbar-thumb {
  background: #777;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* htmx Indicator */

.my-indicator {
  visibility: hidden;
  height: 0;
  scale: 0;
  margin-left: 0;
  transition: all 0.5s ease-in-out;
}

.htmx-request.my-indicator {
  height: 1.5rem;
  visibility: visible;
  scale: 1;
  margin-left: 1rem;
}


/* Date picker fix issues */
.dark input::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}