web/frontend/src/core/components/css/searchBar.scss

@use "../../../css/material" as *;

$font-size: 16px;

// Search container
.search-parent {
    position: relative;
    height: 100%;
    width: 100%;
}

// SearchBar component styles
.search-bar-container {
    position: absolute;
    z-index: 1001;
    overflow: hidden;
    
    // All properties animate together simultaneously
    transition: 
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    // Initial background color for smooth transition
    background-color: $color-dark-surface-container-high;

    &.collapsed {
        top: 8px;
        left: 16px;
        right: 16px;
        border-radius: 24px;
        // Height will be set dynamically by React (48px)
        // background-color inherited from parent
    }

    &.expanded {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        background-color: $color-dark-surface-container;
        // Height will be set dynamically by React
    }

    // Single search bar element
    .search-bar {
        display: flex;
        align-items: center;
        padding: 0 16px;
        height: 48px;
        gap: 12px;
        cursor: pointer;

        .search-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;

            mdui-icon {
                color: $color-dark-on-surface-variant;
                font-size: 20px;
                cursor: pointer;
            }
        }

        .search-input-container {
            flex: 1;
            display: flex;
            align-items: center;

            .search-placeholder {
                color: $color-dark-on-surface-variant;
                font-size: $font-size;
                pointer-events: none;
            }

            .search-input {
                flex: 1;
                border: none;
                outline: none;
                background: transparent;
                color: $color-dark-on-surface;
                font-size: $font-size;
                padding: 8px 0;
                pointer-events: auto;

                &::placeholder {
                    color: $color-dark-on-surface-variant;
                }
            }
        }

        .search-clear {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;

            mdui-icon {
                color: $color-dark-on-surface-variant;
                font-size: 20px;
                cursor: pointer;
            }
        }
    }

    // Results section
    .search-results {
        flex: 1;
        overflow-y: auto;

        .search-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 32px;
            color: $color-dark-on-surface-variant;

            mdui-circular-progress {
                --mdui-circular-progress-color: $color-dark-primary;
            }
        }

        .search-empty,
        .search-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
            color: $color-dark-on-surface-variant;
            text-align: center;
        }

        // Custom styling for search result images
        mdui-list-item {
            img[slot="icon"] {
                $size: 48px;
                
                width: $size;
                height: $size;
                border-radius: 50%;
                object-fit: cover;
            }
        }
    }
}