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

.wc-inputs-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#wc-groups-pool input[type="text"] {
    width: 100%;
    transition: all 0.2s;
}

#wc-groups-pool input[type="text"]:focus {
    background-color: #111827;
    border-color: #3b82f6;
    padding-left: 1rem;
}

#text-header:before {
    display: inline-block;
    position: relative;
    top: 8px;
    left: -8px;
    content: "";
    background: url('/static/favicon.png') no-repeat center/contain;
    mix-blend-mode: lighten;
    width: 2.25rem !important;
    height: 2.25rem !important
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #60a5fa;
}

.animate-fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #374151;
    border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #60a5fa;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.group:hover .group-hover\:line-clamp-none {
    -webkit-line-clamp: unset;
}


.wait-for-action {
    --arrow-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 686 304'%3E%3Cpath fill='none' stroke='%23ab1d1d' stroke-linejoin='round' stroke-width='13' d='m438.43 167.73 239.81 123.69'/%3E%3Cpath fill='%23ab1d1d' d='m449.56 221.33 9.8-3.52-17.39-48.24 49.39-13.82-2.81-10.02-60.15 16.84 21.16 58.76z'/%3E%3C/svg%3E");
    --arrow-short: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 686 304'%3E%3Cpath fill='none' stroke='%23ab1d1d' stroke-linejoin='round' stroke-width='13' d='m438.43 167.73 145.97 75.29'/%3E%3Cpath fill='%23ab1d1d' d='m449.56 221.33 9.8-3.52-17.39-48.24 49.39-13.82-2.81-10.02-60.15 16.84 21.16 58.76z'/%3E%3Cpath fill='none' d='M0 0h686v304H0z'/%3E%3C/svg%3E");
    background-position: 0% 0%;
    background-size: 686px;
    background-repeat: no-repeat;
    background-image: var(--arrow-long);
    animation: arrowPulse .3s infinite steps(1);
}

@keyframes arrowPulse {
    0%,
    49% {
        background-image: var(--arrow-long);
    }
    50%,
    99% {
        background-image: var(--arrow-short);
    }
    100% {
        background-image: var(--arrow-long);
    }
}

#show_info.closed {
    scale: 1.2;
    color: #f5ee41;
    opacity: initial;
}

@keyframes progress-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}

.progress-indeterminate {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    animation: progress-stripes 1s linear infinite;
}

.log-line-error {
    color: #f87171;
}

.log-line-success {
    color: #4ade80;
}

.log-line-info {
    color: #60a5fa;
}

.log-line-warn {
    color: #fad460;
}

.log-line-dim {
    color: #6b7280;
}