/* Form */

.search-panel > form {
    position: relative;
    /*width: 740px;*/
    border-bottom: 1px solid #9e9e9e;
}

/* Focused panel */

.search-panel > form:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #eee;
    transform: scale(0, 1);
    transform-origin: 0 50%;
    transition: transform 0.4s ease;
}

.search-panel--focus > form:before {
    transform: scale(1, 1);
}

/* Components layout */

.search-panel-layout > div {
    display: table;
    width: 100%;
}

/* Components */

.search-panel-icon,
.search-panel-input,
.search-panel-button-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.search-panel-icon {
    width: 26px;
}

.search-panel-icon > svg {
    display: block;
}

.search-panel-icon > svg {
    transition: fill 0.4s ease;
}

.search-panel--focus .search-panel-icon > svg {
    fill: #eee;
}

.search-panel-input input[type='text'] {
    width: 100%;
    padding: 0 16px 0 0;
    border: 0;
    color: #fff;
    background: transparent;
}

.search-panel-input input[type='text']:focus {
    box-shadow: none;
}

.search-panel-button-wrapper {
    position: relative;
    width: 1px;
}

.search-panel-button-wrapper .wicket-ajax-indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #eee;
    animation: search-panel-indicating 1.6s infinite;
}

.search-panel-button-wrapper .wicket-ajax-indicator > img {
    display: none;
}

.search-panel-button {
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    height: 40px;
    padding: 0;
    border: 0;
    cursor: pointer;
    vertical-align: middle;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #9e9e9e;
    background: transparent;
    transition: color 0.4s ease;
}

.search-panel--focus .search-panel-button {
    color: #eee;
}

.search-panel-button:active {
    color: #616161;
    transition: color 0.2s ease;
}

/* Animation */

@keyframes search-panel-indicating {

    0% {
        transform: scale(0, 1);
        transform-origin: 0 50%;
    }

    45% {
        transform: scale(1, 1);
        transform-origin: 0% 50%;
    }

    55% {
        transform: scale(1, 1);
        transform-origin: 100% 50%;
    }

    100% {
        transform: scale(0, 1);
        transform-origin: 100% 50%;
    }
}