@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;

        @m focus {
            .zan-search__input-wrap {
                width: 82%;   
            }
            .zan-icon-clear {
                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;

            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;
            margin-left: 5px;

            @m focus {
               display: block;
            }
        }

        .zan-icon-search {
            color: $c-gray-darker;
            position: absolute;
            top: 9px;
            left: 10px;
            font-size: 16px;
        }

        .zan-icon-clear {
            display: none;
            position: absolute;
            right: 5px;
            top: 8px;
            color: #888;
        }
    }
}