$headerHeight: 3.5em;

:host {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #3f51b5;
    color: white;
    position: relative;
    border: 1px solid black;
    height: $headerHeight;

    div {
        border: 1px solid black;
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: $headerHeight;

        &:nth-child(1) {
            position: absolute;
            top: 0;
            left: 0;
            align-items: center;
            gap: 1em;
            padding: 0 1em;

            a {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                color: white;
                text-decoration: none;
                gap: .5em;

                img {
                    $imageSize: 2em;
                    width: $imageSize;
                    height: $imageSize;
                }
    
                .title {
                    font-size: 1.5em;
                }
            }
        }

        &:nth-child(2) {
            flex: 1;
            $borderRadiusValue: 10em;

            input {
                flex: 1;
                width: 60%;
                max-width: 50em;
                border-radius: $borderRadiusValue 0 0 $borderRadiusValue;
                background-color: white;
                border: solid 1px #ccc;
                margin: .5em 0;
                padding: .2em .5em;
            }

            button {
                display: flex;
                align-items: center;
                border-radius: 0 $borderRadiusValue $borderRadiusValue 0;
                background-color: white;
                border: solid 1px #ccc;
                margin: .5em 0;

                &:hover {
                    background-color: #eee;
                }
            }
        }

        &:nth-child(3) {
            position: absolute;
            top: 0;
            right: 0;
            
            a {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 5em;
                color: white;
                margin: 0 .5em;
            }
        }
    }
}