/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Searchbox component */
@layer components {
    .searchbox {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        
        & .searchbox__form {
            display: flex;
            background: var(--color-bg-surface-glass);
            border: 1px solid var(--color-border-glass);
            border-radius: var(--radius-lg);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            padding: var(--space-xs);
            transition: border-color var(--transition-physical), box-shadow var(--transition-physical);
            
            &:focus-within {
                border-color: var(--color-accent-blue);
                box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.2);
            }
        }
        
        & .searchbox__input {
            flex-grow: 1;
            background: transparent;
            border: none;
            color: var(--color-text-heading);
            padding: var(--space-sm) var(--space-md);
            font-family: var(--font-family-body);
            font-size: 1rem;
            outline: none;
            
            &::placeholder {
                color: var(--color-text-main);
                opacity: 0.6;
            }
        }
        
        & .searchbox__btn {
            background: var(--color-accent-red);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color var(--transition-physical);
            
            &:hover {
                background: #d62828;
            }
        }
        
        & .searchbox__results {
            position: absolute;
            top: calc(100% + var(--space-xs));
            left: 0;
            width: 100%;
            background: var(--color-bg-surface);
            border: 1px solid var(--color-border-glass);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-premium);
            z-index: 50;
            max-height: 400px;
            overflow-y: auto;
            
            &[hidden] {
                display: none;
            }
        }
    }
}