@import 'variables';
@import 'mixins';

header.logged-in {
    background:#22333b;
    height:50px;
    border-bottom:1px solid #22333b;
    .lo-container {
      display:flex;
      flex-flow:row nowrap;
      justify-content:space-between;
    }

    div.spacer {
        flex:1;
    }
    a.logo {
        display:inline-block;
        padding:14px 0;
        vertical-align:middle;
        img {
            display:block;
            height:22px;
        }
    }

    .misc-menu {
        position:relative;
        cursor:pointer;
        outline-style: none;

        &:hover, &:focus {
            .dropdown {
                display:block;
            }
        }
        // explicit rule to avoid browser issues for no-support
        &:focus-within {
            .dropdown {
                display:block;
            }
        }
        .in-situ {
            width:55px;
            margin-left:5px;
            padding:10px 0 15px 0;
            text-align:right;
            img {
                display:inline-block;
                height:30px;
                border:1px solid rgba(#fff, 0.5);
                border-radius:2px;
                vertical-align:middle;
                margin-right:5px;
            }
            i {
                color:#d7d7d7;
                vertical-align:middle;
            }
        }
        .dropdown {
            display:none;
            position:absolute;
            z-index:99999999;
            right:0;
            top:55px;
            background:#fff;
            border:1px solid #ccc;
            box-shadow: 0 0 3px rgba(#000, 0.2);
            border-radius:3px;
            padding-bottom:6px;
            max-width:215px;
            i {
                position:absolute;
                top:-14px;
                right:24px;
                @include font-size(20, 20);
                color:#ccc;
                &:after {
                    font-family:"Font Awesome 5 Pro";
                    font-weight:900;
                    content: "\f0d8";
                    position:absolute;
                    top:3px;
                    right:1px;
                    color:#fff;
                    @include font-size(17, 17);
                }
            }

            .person {
                cursor:default;
                padding:14px 20px 12px;
                color:#666;
                @include font-size(13, 17);
                font-weight:$regular;
                strong {
                    font-weight:$bold;
                }
            }
            ul{
                list-style: none;
                border-top: 1px solid #eee;
                padding: 6px 0;
                margin: 0;

                &:last-child{
                    padding-bottom: 0;
                }
            }

            a {
                display:block;
                padding:8px 20px;
                text-decoration:none;
                color:#666;
                @include font-size(13, 13);
                white-space:nowrap;
                &:hover {
                    background:#eee;
                }
            }
        }
    }
    .notifications {
        color:rgba(#fff, 0.9);
        padding:7px 10px;
        position:relative;
        margin:10px 0 15px 0;
        background:rgba(#fff, 0.06);
        border-radius:2px;
        color:#bababa;
        text-shadow: 0 0 1px solid rgba(0,0,0,0.7);
        @include font-size(16, 16);
        &.active {
            &:before {
                content: "";
                position:absolute;
                top:6px;
                right:6px;
                width:5px;
                height:5px;
                background:#f34a56;
                border-radius:100%;
            }
        }
    }
}
