$headerHeight: 3.5em;

:host {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #3f51b5;
    color: white;
    position: relative;
    height: $headerHeight;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);

    div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: relative;
        height: $headerHeight;

        &.left {
            position: absolute;
            top: 0;
            left: 0;
            align-items: center;
            gap: 1em;
            padding: 0 1em;
            z-index: 2;

            button {
                background-color: #3f51b5;
                color: white;
                border: none;
                border-radius: 10em;
                transition: background-color .2s ease-in-out;
                display: flex;
                justify-content: center;
                align-items: center;
                $buttonSize: 2.5em;
                width: $buttonSize;
                height: $buttonSize;

                &:hover {
                    cursor: pointer;
                    background-color: #5c6bc0;
                }
            }

            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;
                    opacity: 0;
                    transition: opacity .2s ease-in-out;

                    @media screen and (min-width: 600px) {
                        opacity: 1;
                    }
                }
            }
        }

        &.middle {
            flex: 1;
            $borderRadiusValue: 10em;
            position: relative;
            transition: max-width .2s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
            
            app-publications-search-bar {
                width: 100%;
                max-width: 12em;

                @media screen and (min-width: 435px) {
                    max-width: 16em;
                }
    
                @media screen and (min-width: 500px) {
                    max-width: 20em;
                }
    
                @media screen and (min-width: 700px) {
                    max-width: 24em;
                }
    
                @media screen and (min-width: 800px) {
                    max-width: 32em;
                }
    
                @media screen and (min-width: 900px) {
                    max-width: 38em;
                }
    
                @media screen and (min-width: 1000px) {
                    max-width: 45em;
                }
    
                @media screen and (min-width: 1100px) {
                    max-width: 50em;
                }
            }
        }

        &.right {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 5em;
                color: white;
                margin: 0.5em 0.5em;
                border-radius: 10em;
                text-decoration: none;
                padding: 0 .8em;
                background-color: #3f51b5;
                transition: background-color .2s ease-in-out;

                &:hover {
                    background-color: #5c6bc0;
                }
            }

             button {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 2.5em;
                color: white;
                margin: 0.5em 0.5em;
                border-radius: 10em;
                text-decoration: none;
                padding: 0;
                background-color: #3f51b5;
                transition: background-color .2s ease-in-out;

                &:hover {
                    background-color: #5c6bc0;
                }

                mat-icon {
                    margin: 0;
                }
            }
        }
    }
}

app-side-menu {
    height: 100%;
}

.authenticated-user-menu {
    display: flex;
    flex-direction: column;
    padding: 0.2em 0;

    a {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        background-color: white;
        color: black;
        padding: 1em;
        gap: .5em;
        transition: background-color .2s ease-in-out, color .2s ease-in-out;

        &:hover {
            background-color: #5c6bc0;
            color: white;
        }

        &.disconnection {
            color: #D50000;

            &:hover {
                background-color: #E53935;
                color: white;
            }
        }
    }
}