.search-icon {
    width: 2.3rem;
}

.search-icon-container {
    position: relative;
    flex-shrink: 0;
}

/* gives a wider hit area for the 3 people that will notice the animation : ) */
.search-icon-container::before {
    content: '';
    position: absolute;
    inset: -1rem;
}

.search-icon-container:hover > .search-icon {
    animation: searchIconHover 2.9s forwards;
}

@keyframes searchIconHover {
    0%, 39% { translate: 0 0; }
    20% { scale: 1.3; }
    40% { scale: 1; }
    50% { translate: -30% 30%; }
    70% { translate: 30% -30%; }
    90% { translate: -30% -30%; }
    100% { translate: 0 0; }
}

.search {
    transition: border-color .2s;
    position: relative;
}

.search:hover {
    border-color: var(--color-text-subdue);
}

.search:focus-within {
    border-color: var(--color-primary);
}

.search-input {
    border: 0;
    background: none;
    width: 100%;
    height: 6rem;
    font: inherit;
    outline: none;
    color: var(--color-text-highlight);
}

.search-input::placeholder {
    color: var(--color-text-base-muted);
    opacity: 1;
}

.search-bangs { display: none; }

.search-bang {
    border-radius: calc(var(--border-radius) * 2);
    background: var(--color-widget-background-highlight);
    padding: 0.3rem 1rem;
    flex-shrink: 0;
    font-size: var(--font-size-h5);
    animation: searchBangsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
}

@keyframes searchBangsEntrance {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

.search-bang:empty {
    display: none;
}