michaelschiemer/resources/css/admin/06-components/_search.css

/**
 * Search Component - Admin Interface
 *
 * Semantisches <search> Element für Suchformulare.
 * Baseline 2023: <search> Element ist Baseline Newly available.
 *
 * Features:
 * - Semantisches HTML mit <search> Element
 * - Accessibility-Support
 * - Verschiedene Varianten (header, sidebar, standalone)
 * - Dark Theme Optimierungen
 */

@layer components {
    /**
     * Search Element Base
     */
    search.admin-search {
        position: relative;
        width: 100%;
        display: block;
    }

    /**
     * Search Form
     */
    search.admin-search form {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        position: relative;
    }

    /**
     * Search Input
     */
    search.admin-search .admin-search__input {
        width: 100%;
        padding: var(--spacing-xs) var(--spacing-sm);
        padding-right: calc(var(--spacing-sm) + 36px + var(--spacing-xs)); /* Space for submit button */
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        background-color: var(--bg-secondary);
        color: var(--content-text);
        transition: all var(--transition-base);

        &::placeholder {
            color: var(--content-text);
            opacity: 0.5;
        }

        &:focus {
            outline: none;
            border-color: var(--focus-ring);
            box-shadow: 0 0 0 3px var(--focus-ring-alpha);
            background-color: var(--content-bg);
        }
    }

    /**
     * Search Submit Button
     */
    search.admin-search .admin-search__submit {
        position: absolute;
        right: var(--spacing-xs);
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        padding: var(--spacing-xs);
        cursor: pointer;
        color: var(--content-text);
        opacity: 0.6;
        transition: opacity var(--transition-base);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);

        &:hover,
        &:focus {
            opacity: 1;
            background-color: var(--hover-overlay);
        }

        &:focus-visible {
            outline: 2px solid var(--focus-ring);
            outline-offset: 2px;
        }
    }

    /**
     * Search Icon
     */
    search.admin-search .admin-search__icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    /**
     * Visually Hidden Label
     */
    search.admin-search .admin-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /**
     * Variant: Header
     */
    search.admin-search--header {
        flex: 0 1 400px;
        max-width: 400px;

        @media (max-width: 767px) {
            flex: 1;
            max-width: none;
        }
    }

    /**
     * Variant: Sidebar
     */
    search.admin-search--sidebar {
        margin-bottom: var(--spacing-md);
    }

    /**
     * Variant: Standalone
     */
    search.admin-search--standalone {
        max-width: 600px;
        margin: 0 auto;
    }

    /**
     * Dark Theme Optimizations
     */
    @media (prefers-color-scheme: dark) {
        search.admin-search .admin-search__input {
            background-color: var(--bg-secondary);
            border-color: var(--border-light);

            &:focus {
                background-color: var(--content-bg);
                border-color: var(--focus-ring);
            }
        }

        search.admin-search .admin-search__submit {
            color: var(--content-text);

            &:hover {
                background-color: oklch(from var(--bg-secondary) calc(l + 0.1) c h);
            }
        }
    }
}