@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-added.swipe-left-swap , .htmx-added .swipe-left-swap{
   @apply opacity-100 !important;
   @apply scale-100 !important;
   @apply -translate-x-1/2 !important;
}

.swipe-left-swap {
   @apply opacity-100;
   @apply scale-100;
   @apply translate-x-0;

}
.htmx-settling.htmx-added .swipe-left-swap, .htmx-settling.htmx-added.swipe-left-swap{

   @apply opacity-0 !important;
   @apply scale-75 !important;
   @apply translate-x-1/2 !important;

}


.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-removed {
    animation: pulse-red 300ms 2;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.dark .live-removed {
    animation: pulse-dark-red 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;}
}

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

@keyframes pulse-dark-red {
    0% { @apply dark:bg-red-700; }
    100% { @apply bg-red-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-request .htmx-indicator-invisible {
    visibility: hidden !important;
}

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

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

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

.arrow,
.arrow::before {
  position: absolute;
  width: 24px;
  height: 24px;
  background: inherit;
}

.arrow {
  visibility: hidden;
}


.arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.arrow {
  bottom: -4px;
}


.ct-series-a .ct-bar {
    stroke: #79b52e;
    fill: #79b52e;
}

.ct-series-b .ct-bar {
    stroke: #ff0303;
    fill: #ff0303;
}

.ct-series-c .ct-bar {
    stroke: #009cea;
    fill: #009cea;
}

.ct-series-d .ct-bar {
    stroke: #f48017;
    fill: #f48017;
}
.ct-series-e .ct-bar {
    stroke: #9c27b0;
    fill: #9c27b0;
}
[x-cloak] {
    display:none
}

.tippy-box[data-theme~="dropdown"] .tippy-content{
    padding: 0px;
  }

.tippy-box[data-theme~="dropdown"]{
    background-color: unset !important;
  }