/*----------------------------------------------------------------*/
/*  Toolbar
/*----------------------------------------------------------------*/

@import 'angular-material-variables';
@import 'variables';

#toolbar {
    min-height: $toolbar-height;
    z-index: 55 !important;

    .toolbar-item {
        height: 100%;
        padding: 0 16px;
        border: 0;

        &:not(:nth-child(2)) {
            border-left-width: 1px;
            border-color: #f9f9f9;
            border-style: solid;
        }

        &[ng-click] {
            cursor: pointer;
        }
    }

    .toolbar-item-logo {
        height: 26px;
        width: auto;
    }

    .toolbar-user-profile-picture {
        width: 25px;
        height: 25px;
        margin-right: 8px;
        @include border-radius(50%);
    }

    .toolbar-user-name {
        font-weight: 500;
        font-size: 1rem;
    }

    @media screen and (max-width: $layout-breakpoint-xs) {
        .toolbar-item-logo {
            display: none;
        }
    }
}

#toolbar-popup-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 56;
}

#toolbar-popup {
    opacity: 0;
    min-width: 280px;
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: $section-background-color;
    z-index: 56;
    border: 1px solid #ccc;
    @include box-shadow($whiteframe-shadow-1dp);
    @include border-radius(4px);
    @include transition(opacity 100ms ease-out);

    .toolbar-popup-user {
        padding: 16px;

        .er-button {
            margin: 8px 0 0 0;
        }
    }

    .toolbar-popup-license-information {
        background-color: #f5f5f5;
        border-top: 1px solid #ccc;
        padding: 16px;

        span + span {
            font-weight: 600;
            margin-left: 8px;
        }
    }

    .toolbar-popup-tip {
        position: absolute;
        right: 10px;
        top: -20px;
        border: 10px solid;
        border-right-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        border-bottom-color: $section-background-color;
    }

    .toolbar-popup-user-profile-picture {
        width: 100px;
        height: 100px;
        margin-right: 16px;
        border: 1px solid #e6e6e6;
        @include border-radius(50%);
    }

    .toolbar-popup-user-actions {
        .toolbar-popup-user-name {
            font-weight: 600;
        }
    }
}