/* Shared styles for Tools App container and elements */

@keyframes bounce-in {
    0% {
        transform: translate(-50%, 2rem);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, -0.5rem);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.animate-bounce-in {
    animation: bounce-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Form element transitions and focus states */
.tool-container textarea,
.tool-container input[type="text"],
.tool-container input[type="number"],
.tool-container select {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.tool-container textarea:focus,
.tool-container input[type="text"]:focus,
.tool-container input[type="number"]:focus,
.tool-container select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-border-subtle);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-muted);
}

.dark ::-webkit-scrollbar-thumb {
    background-color: var(--color-border-subtle);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-muted);
}

/* Scoped scrollbar for tool panels */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #DEE2E6;
    border-radius: 20px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #3D3D3D;
}

/* Shared tool animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Prism code display overrides */
pre[class*="language-"] {
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    text-shadow: none !important;
}

code[class*="language-"],
pre[class*="language-"] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-size: 13px !important;
}