view/adminhtml/web/css/source/_module.less
//
//  Variables
//  ---------------------------------------------

@header__background-color: @menu__background-color;
@header__color: @color-white;
@header__z-index: @menu__z-index - 1;

@search__width: 400px;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .searchbar {
        align-items: center;
        background: @header__background-color;
        color: @header__color;
        display: grid;
        gap: 2rem;
        grid-template-columns: 1fr @search__width 1fr;
        height: 6rem;
        justify-content: center;
        padding: 1rem 1rem 1rem 9.8rem;
        width: 100%;
        z-index: @header__z-index;

        &._sticky {
            left: 0;
            position: fixed;
            top: 0;
        }

        &__right {
            align-items: center;
            display: flex;
            justify-content: flex-end;

            .admin__action-dropdown {
                background: @header__background-color;
                border: none !important;
                box-shadow: none !important;
                color: @header__color;
            }

            .admin__action-dropdown:after,
            .admin__action-dropdown:before {
                color: @header__color !important;
            }

            .admin-user .admin__action-dropdown:after {
                border-color: @header__color transparent transparent transparent !important;
            }

            .admin__action-dropdown-menu {
                border: none !important;
                z-index: 2;
            }
        }
    }

    .search {
        color: @color-black;
        position: relative;

        svg {
            display: block;
            max-width: 100%;
        }

        &__icon {
            left: .751rem;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: opacity .2s ease-in-out;
            width: 16px;
        }

        &.loading {
            .search {
                &__icon {
                    opacity: .5;
                }
            }
        }

        &__input {
            border: none;
            border-radius: .5rem;
            color: @color-black;
            min-width: @search__width;
            padding: .5rem 6.5rem .5rem ~'calc(1.5rem + 16px)';
        }

        &__hotkey {
            background: @header__background-color;
            border-radius: .275rem;
            color: @header__color;
            font-size: 1rem;
            height: 2rem;
            line-height: 1;
            padding: .5rem;
            position: absolute;
            right: .425rem;
            top: 50%;
            transform: translateY(-50%);
        }

        &__results {
            background: @color-white;
            border-radius: 5px;
            bottom: -.5rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);
            color: @color-black;
            left: 0;
            padding: 1rem;
            position: absolute;
            transform: translateY(100%);
            width: 100%;
            z-index: @z-index-7;

            &__empty {
                padding: 1rem;
            }
        }

        &__hits {
            margin: 0;
        }

        &__hit {
            align-items: center;
            border-radius: .5rem;
            cursor: pointer;
            display: flex;
            gap: 1rem;
            overflow: hidden;
            padding: .75rem 1rem;

            &:focus,
            &:hover {
                background: @color-lighter-gray;
                box-shadow: none;
            }

            &__icon {
                display: flex;
                justify-content: center;
                width: 18px;
            }

            &__content {
                max-width: ~'calc(100% - 28px)';

                &__secondary {
                    display: flex;
                    flex-wrap: nowrap;
                    gap: 5px;

                    span {
                        color: @color-very-dark-gray2;
                        font-size: 1.2rem;
                        text-wrap: nowrap;
                    }
                }
            }
        }

        ._ellipsis {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
        }
    }

    .menu-wrapper .logo {
        height: 6rem !important;

        .logo-img {
            height: 2.75rem !important;
        }
    }

    body:has(.header._sticky) {
        .page-wrapper {
            margin-top: 6rem !important;
        }

        .page-main-actions .page-actions._fixed {
            top: 6rem !important;
        }
    }
}
