<template>
    <div class="box">
        <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 Search Bar</p>
        <div style="padding:30px 0">
            <div class="flex-between">
                <!-- 여기서부터 -->
                <div class="flex">
                    <select name="" id="" class="circle-select">
                        <option value="all">전체</option>
                    </select>
                    <div class="search">
                        <input type="text" class="search-input" placeholder="Search">
                        <button class="search-button">
                            <svg-icon type="mdi" :path="searchPath" class="search-icon"></svg-icon>
                        </button>
                    </div>
                </div>
                <!-- 여기서까지 복사 -->
                <!-- 여기서부터 -->
                <div class="flex">
                    <select name="" id="" class="square-select">
                        <option value="all">전체</option>
                    </select>
                    <div class="search-square">
                        <input type="text" class="square-input" placeholder="Search">
                        <button class="square-button">
                            <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
                        </button>
                    </div>
                </div>
                <!-- 여기서까지 복사 -->
            </div>
        </div>
        <div style="padding:30px 0">
            <div class="flex-between">
                <!-- 여기서부터 -->
                <div class="flex">
                    <select name="" id="" class="circle-select2">
                        <option value="all">전체</option>
                    </select>
                    <div class="search2">
                        <input placeholder="Search" type="text" class="search-zone">
                        <button type="submit" class="search-btn">검색</button>
                    </div>
                </div>
                <!-- 여기서까지 복사 -->
                <!-- 여기서부터 -->
                <div class="flex">
                    <select name="" id="" class="square-select2">
                        <option value="all">전체</option>
                    </select>
                    <div class="search2-square">
                        <input placeholder="Search" type="text" class="square-zone">
                        <button type="submit" class="square-btn">검색</button>
                    </div>
                </div>
                <!-- 여기서까지 복사 -->
            </div>
        </div>
    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify } from '@mdi/js';
export default {
    data() {
        return {
            searchPath: mdiMagnify
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

    },
    components: {
        'SvgIcon': SvgIcon
    },
    mounted() {
        console.log('main mounted');
    }
}
</script>

<style scoped>
/* */
.box {
    padding: 50px;
    border: 1px solid #eee;
    margin-bottom: 30px;
}

/* 1번 디자인 */
.search {
    position: relative;
    margin-left: 5px;
}

.circle-select {
    border-radius: 30px;
}

.search-input {
    color: #646464;
    padding: 5px 10px;
    border-radius: 30px;
    width: 300px;
    transition: all ease-in-out .5s;
}

.search-input:hover,
.search-input:focus {
    box-shadow: 0 0 1em #00000013;
}

.search-input:focus {
    outline: none;
    background-color: #f0eeee;
}

.search-input::-webkit-input-placeholder {
    font-weight: 100;
    color: #ccc;
}

.search-input:focus {
    background-color: #f0eeee;
}

.search-button {
    border: none;
    margin-left: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.search-button:hover {
    cursor: pointer;
}

.search-icon {
    color: #b4b4b4;
}

/* 1-2 */
.search-square {
    position: relative;
}

.square-input {
    color: #646464;
    padding: 5px 10px;
    border-radius: 5px;
    width: 300px;
    transition: all ease-in-out .5s;
    margin-left: 5px;
}

.square-input:hover,
.square-input:focus {
    box-shadow: 0 0 1em #00000013;
}

.square-input:focus {
    outline: none;
    background-color: #f0eeee;
}

.square-input::-webkit-input-placeholder {
    font-weight: 100;
    color: #ccc;
}

.square-input:focus {
    background-color: #f0eeee;
}

.square-button {
    border: none;
    margin-left: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.square-button:hover {
    cursor: pointer;
}

.square-icon {
    color: #b4b4b4;
}


/* 2번 디자인 */
.search2 {
    display: inline-block;
    position: relative;
}

.circle-select2 {
    border: none;
    border-radius: 30px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.search2 .search-zone {
    width: 200px;
    padding: 5px 10px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-left: 5px;
}

.search2 .search-btn {
    background-color: #4e99e9;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    right: 0;
    transition: .9s ease;
}

.search2 .search-btn:hover {
    transform: scale(1.05);
    color: rgb(255, 255, 255);
    background-color: #213f99;
}

/* 2-1 */
.search2-square {
    display: inline-block;
    position: relative;
}

.square-select2{
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.search2-square .square-zone {
    width: 200px;
    padding: 5px 10px;
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-left: 5px;
}

.search2-square .square-btn {
    background-color: #4e99e9;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    right: 0;
    transition: .9s ease;
}

.search2-square .square-btn:hover {
    transform: scale(1.05);
    color: rgb(255, 255, 255);
    background-color: #213f99;
}


/* select + search */
</style>