@import "../style/themes/default.less";

@search-prefix-cls: ~"@{sino-prefix}-search";

.@{search-prefix-cls} {
    display: flex;
    align-items: center;
    width: 100%;
    height: @search-height;
    padding: (@search-height - @search-input-height) / 2 @search-horizontal-padding;
    font-size: @list-item-font-size;
    background-color: #fff;
    overflow: hidden;

    &-input {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: @search-input-height;
        border-radius: @search-border-radius;
        background-color: @search-bg-color;

        &&-progressing {

            .@{search-prefix-cls}-placeholder {
                padding-left: @search-input-padding;
            }

            .@{search-prefix-cls}-control {
                padding-left: @search-input-padding + @search-icon-font-size + @search-icon-margin-right;
                opacity: 1;
            }

            &+.@{search-prefix-cls}-cancel {
                opacity: 1;
            }
        }

        &&-clear {

            .@{search-prefix-cls}-control {
                padding-right: 0;
            }
        }
    }

    &-placeholder {
        position: absolute;
        top: 0;
        left: 0;
    }

    &-control {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 0 @search-input-padding;
        text-align: left;
        color: @search-input-color;
        opacity: 0;
        -webkit-appearance: none;
    }

    input[type="search"]::-webkit-input-placeholder {
        color: transparent;
    }

    input[type="search"]::-moz-placeholder {
        color: transparent;
    }

    input[type="search"]::-ms-input-placeholder {
        color: transparent;
    }

    input[type="search"]::placeholder {
        color: transparent;
    }

    input[type="search"]::-webkit-search-cancel-button {
        display: none;
    }

    &-placeholder {
        box-sizing: content-box;
        z-index: 1;
        width: 100%;
        height: @search-input-height;
        text-align: center;
        transition: width .3s;

        &-container {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        &-icon {
            margin-right: @search-icon-margin-right;
            font-size: @search-icon-font-size;
            color: @search-icon-color;
        }

        &-text {
            font-size: @search-input-font-size;
            color: @search-input-placeholder-color;
        }
    }

    &-clear {
        padding: @search-input-padding;
        font-size: @search-clear-font-size;
        color: @search-clear-color;
        cursor: pointer;
    }

    &-cancel {
        flex: none;
        padding-left: @search-horizontal-padding;
        font-size: @search-cancel-font-size;
        color: @search-cancel-color;
        text-align: right;
        opacity: 0;


        &-anim {
            transition: margin-right .3s, opacity .3s;
            transition-delay: .1s;
        }
    }
}

@media (min-device-width: @screen-sm) {
    .@{search-prefix-cls} {
        font-size: @pc-font-size-base;
    }
}
