@import url('colors.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    overflow: hidden;
    color: white;
}

header {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid black;
    transition: background-color 0.2s ease-out;

    .icons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .5em 1em;
        height: 65px;
        border-bottom: 1px solid black;
        font-size: 1.2em;
        font-weight: 500;  
        
        .pokeicon {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .75em;
            svg {
                width: 40px;
                height: 40px;
            }
        }

        .searchbar {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 2em;
            border-radius: 1000px; 
            box-shadow: 0 0 2px 1px var(--gray-950); 

            .bi-search {
                padding: .25em;
                padding-left: .5em;
                transition: 0.2s ease;
                display: flex;
                align-items: center;
            }

            input {
                height: 100%;
                width: 200px;
                border-radius: 1000px;
                padding: .5em;
                border: NONE;
                outline: none;
                transition: 0.2s ease;
            }   
            .bi-arrow-right{
                border-top-right-radius: 2em;
                border-bottom-right-radius: 2em;
                cursor: pointer;
                width: 0;
                font-size: 0px;
                display: flex;
                align-items: flex-start;
                padding: .5em;
                padding-left: .25em;
                transition: 0.2s ease;
            }
        }

        .searchbar:has(input:not(:placeholder-shown)) {
            & .bi-search {
                width: 0%;
                font-size: 0;
            }
            & .bi-arrow-right {
                width: 1.5em;
                font-size: 1em;
            }
            & input {
                width: 232px;
            }
        }

        .themes {
            display: flex;
            gap: .5em;
            margin-right: 1em;
            font-size: 1.25em;
            i {
                color: var(--gray-500);
                transition: 0.2s ease;
                cursor: pointer;
                &:hover {
                    color: var(--gray-300);
                }
                &.bi-fire:hover {
                    color: var(--red-400);
                }
                &.bi-droplet-fill:hover {
                    color: var(--blue-400);
                }
                &.bi-leaf-fill:hover {
                    color: var(--green-400);
                }

                &.bi-fire.active {
                    color: var(--red-400);
                }
                &.bi-droplet-fill.active {
                    color: var(--blue-400);
                }
                &.bi-leaf-fill.active {
                    color: var(--green-400);
                }
            }
        }
    }

    .searchs {
        height: 35px;
    }   
}

.fire header {
    background-color: var(--red-800);
}

.water header {
    background-color: var(--blue-800);
}

.leaf header {
    background-color: var(--green-700);
}

.fire header .icons .searchbar {
    background-color: var(--red-800);
    
    input:focus {
        border: 1px solid var(--red-900);
    }
    .bi-arrow-right {
        background-color: var(--red-800);
    }
}

.water header .icons .searchbar {
    background-color: var(--blue-800);
    
    input:focus {
        border: 1px solid var(--blue-900);
    }
    .bi-arrow-right {
        background-color: var(--blue-800);
    }
}

.leaf header .icons .searchbar {
    background-color: var(--green-800);
    
    input:focus {
        border: 1px solid var(--green-900);
    }
    .bi-arrow-right {
        background-color: var(--green-800);
    }
}

@media (max-width: 650px){
    header {
        .icons{ 
            padding: 0.25em .5em;
            .pokeicon {
                gap: .25em;
                cursor: pointer;
                p {
                    font-size: 0;
                }
                svg {
                    width: 2.5em;
                }
            }
            .searchbar input {
                width: 125px;
            }
            .searchbar input:focus {
                width: 150px;
            }
            .searchbar .bi-search {
                display: none;
            }
            .searchbar:has(input:not(:placeholder-shown)) {
                & .bi-arrow-right {
                    width: 1.5em;
                    font-size: 1em;
                }
                & input {
                    width: calc(150px - 1.5em);
                }
            }
            .themes {
                gap: .2em; 
                margin-right: 0;
            }
        }
        
    }
}