#search-input {
    position: relative;
    z-index: 1;
}

#search-placeholder {
    position: absolute;
    z-index: 2;
    left: 36px;
    right: 34px;
    top: 0;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.search-placeholder-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    color: #8a7a7a;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.8s ease;
}

.search-placeholder-line.is-on {
    opacity: 1;
}

.search-icon {
    z-index: 3;
}

#search-clear {
    z-index: 4;
}

#search-placeholder.is-hidden,
#search-placeholder.is-hidden .search-placeholder-line {
    opacity: 0;
    visibility: hidden;
    transition: none;
}