/* Button Components */
.search-button {
    @apply border-none cursor-pointer flex items-center justify-center;
    background: none;
    color: var(--text-secondary);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all var(--animation-normal) ease;
    font-size: var(--font-size-lg);
    width: 24px;
    height: 24px;
}

.search-button:hover {
    background: var(--bg-tertiary);
    color: oklch(from var(--color-white) l c h / 0.8);
}

.search-button.active {
    background: oklch(from var(--color-white) l c h / 0.15);
    color: oklch(from var(--color-white) l c h / 0.9);
}

.search-close {
    @apply border-none cursor-pointer flex items-center justify-center shrink-0 relative select-none outline-none;
    background: var(--accent-gray);
    color: var(--text-primary);
    padding: 2px;
    border-radius: 50%;
    transition: all var(--animation-normal) ease;
    font-size: var(--font-size-xs);
    width: 14px;
    height: 14px;
    z-index: 1001;
    pointer-events: auto;
}

.search-close:hover {
    background: oklch(from var(--color-neutral-500) l c h / 0.8);
    color: oklch(from var(--color-white) l c h / 0.9);
}

.search-close:active {
    background: var(--color-neutral-500);
    transform: scale(0.95);
}