.search-input {
    .search-input-color-set();

    position: relative;
    color: @search-input-color;

    .container-search-input {
        background-color: @search-input-bg-color;
        border: 0;
        font-family: @font-family-sans-serif;
        font-size: 15px;
        font-weight: 400;
        height: 52px;
        line-height: 52px;
        margin: 0;
        outline: 0;
        padding-right: 20px;
        width: 100%;

        &::-webkit-input-placeholder {
            color: @search-input-placeholder-color;
        }

        &:-moz-placeholder { /* Firefox 18- */
            color: @search-input-placeholder-color;
        }

        &::-moz-placeholder {  /* Firefox 19+ */
            color: @search-input-placeholder-color;
        }

        &:-ms-input-placeholder {
            color: @search-input-placeholder-color;
        }

        &:focus {
            &, & + .igz-icon-search:before {
                color: @search-input-focus-icon-search-before-color;
            }

            &::-webkit-input-placeholder {
                color: @search-input-focus-placeholder-color;
            }

            &:-moz-placeholder { /* Firefox 18- */
                color: @search-input-focus-placeholder-color;
            }

            &::-moz-placeholder {  /* Firefox 19+ */
                color: @search-input-focus-placeholder-color;
            }

            &:-ms-input-placeholder {
                color: @search-input-focus-placeholder-color;
            }

            &::placeholder {
                /* modern browser versions */
                color: @search-input-focus-placeholder-color !important;
            }
        }
    }

    .igz-icon-search {
        font-size: 16px;
        height: 16px;
        position: absolute;
        right: 0;
        top: 17px;
        width: 16px;
        z-index: 1;
    }

    .clear-button {
        font-size: 10px;
        position: absolute;
        right: 4px;
        top: 17px;
        cursor: pointer;
        color: @clear-button-color;
        padding: 4px 5px 2px;
        opacity: 0.64;
        background-color: @clear-button-bg-color;
        border-radius: 50%;
        line-height: initial;

        &:hover {
            opacity: 1;
        }
    }

    input::-ms-clear {
        display: none;
    }
}

.search-input-actions-bar {
    .search-input-color-set();

    position: relative;
    .container-search-input {
        border: 0;
        margin: 0;
        font-family: @font-family-sans-serif;
        font-size: 14px;
        height: 52px;
        line-height: 52px;
        padding: 0 25px 0 45px;
        outline: 0;
        width: 100%;
    }

    .igz-icon-search {
        color: @search-input-actions-bar-icon-search-color;
        font-size: 16px;
        height: 16px;
        position: absolute;
        left: 18px;
        top: 17px;
        width: 16px;
        z-index: 1;
    }

    input::-ms-clear {
        display: none;
    }
}

.search-input-not-found {
    .search-input-color-set();

    color: @search-input-not-found-color;
    font-family: @font-family-sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 9px;

    .search-message {
        min-height: 49px;
        line-height: 49px;
        width: 100%;
        text-align: center;
        letter-spacing: 0.1px;
        border: @search-input-not-found-message-border;
    }

    .create-item-button {
        display: flex;
        align-items: center;
        padding: 0 19px 0 7px;
        margin-top: 8px;
        border-radius: 12px;
        height: 24px;
        color: @create-item-btn-color;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        background-color: @create-item-btn-bg-color;
        border: @create-item-btn-border;
        text-transform: uppercase;

        &:hover {
            background-color: @create-item-btn-hover-bg-color;
            box-shadow: @create-item-btn-hover-box-shadow;
            border: @create-item-btn-hover-border;
        }

        &:focus {
            outline: none;
        }

        &:active {
            background-color: @create-item-btn-active-bg-color;
            box-shadow: @create-item-btn-active-box-shadow;
            border: none;
        }

        .igz-icon-add {
            font-size: 10px;
            line-height: 15px;
            padding-right: 8px;
        }
    }
}