@import "./common/var.css";

@component-namespace zan {
    @b search {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        position: relative;
        box-sizing: border-box;
        padding: 4px 15px;
        background-color: #F2F2F2;
        @when focus {
            .zan-search__input-wrap {
                width: 82%;   
            }
            span {
                display: inline-block;
            }
        }
        @e input-wrap {
            position: relative;
            width: 90%;
            padding: 8px 24px 8px 35px;
            border: 1px solid $c-gray-light;
            border-radius: 4px;
            background-color: $c-white;
            span {
                display: none;
                position: absolute;
                right: 5px;
                top: 8px;
            }
            input {
                width: 100%;
                height: 14px;
                font-size: 14px;
                color: $c-gray-dark;
                border: none;
                outline: none;
            }
        }
        @e cancel {
            display: none;
            color: #44BB00;
            font-size: 14px;
            white-space: nowrap;
            @when focus {
               display: block;
            }
        }
    }
}