/**
 * Application top bar styles.
 */

.app-header-container {
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: @top-bar-height;
    color: @top-bar-color;
    font-size: @top-bar-font-size;
    border-bottom: @top-bar-border-bottom;
    background: @top-bar-bg;
    .box-shadow(@top-bar-box-shadow);
}

.app-header {
    max-width: @top-bar-max-width;
    height: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    .dropdown {
        display: flex;
        justify-content: center;
        align-items: stretch;

        > .dropdown-menu {
            margin-top: 0;
            .border-top-radius(0);
        }

        &.open > .dropdown-toggle {
            &,
            &:hover,
            &:focus {
                color: @top-bar-link-active-color;
                background-color: @top-bar-link-active-bg;
            }
        }
    }
}

.app-header-item {
    padding: 0 floor(@grid-gutter-width / 2);
    display: flex;
    vertical-align: middle;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.app-header-brand {
    height: 100%;
    text-align: center;
    margin-right: auto; // will stack button bar to the rights (TODO : it will not work if brand is not displayed)

    // permit to center the img
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.app-header-logo {
    max-height: 75%;

    // fallback for IE 11 and logos that don't define color schema
    fill: @top-bar-brand-color;

    // declare colors var to make it usable inside the SVG
    --logo-default: @top-bar-brand-color;
    --logo-primary: @brand-primary;

    + .app-header-title {
        margin-left: floor(@grid-gutter-width / 2);
    }
}

.app-header-title {
    text-align: left;
    margin: 0;
    line-height: 1;
    font-size: @top-bar-brand-font-size;
    font-weight: 900;
    color: @top-bar-brand-color;

    > small {
        display: block;
        margin-top: 2px;
        font-size: 70%;
        font-weight: normal;
        font-style: italic;
        color: @brand-primary;
    }
}

.app-header-btn {
    color: @top-bar-link-color;
    background: @top-bar-link-bg;

    //.fa,
    .action-icon {
        font-size: @font-size-large;
    }

    // puts labels in the bottom right corner
    .action-subscript {
        position: absolute;
        top: auto; // reset bootstrap default
        bottom: 5px;
        right: 5px;
        line-height: 1;

        &.label {
            font-size: 10px;
            padding: .2em .4em;
        }
    }

    &:hover,
    &:focus {
        color: @top-bar-link-hover-color;
        background: @top-bar-link-hover-bg;
    }

    &.active {
        &,
        &:hover,
        &:focus {
            color: @top-bar-link-active-color;
            background-color: @top-bar-link-active-bg;
        }
    }

    &.disabled {
        &,
        &:hover,
        &:focus {
            color: @top-bar-link-disabled-color;
            background-color: @top-bar-link-disabled-bg;
        }
    }
}

.app-header-dropdown {
    width: 360px;
    padding: 0; // reset default .dropdown-menu

    .app-header-dropdown-header {
        padding: floor(@grid-gutter-width / 2);
        text-align: center;
        background: @panel-default-heading-bg;

        .fa {
            margin-right: 0; // because there is a hack in styles to add margins on dropdown icons
        }

        h2 {
            margin: 0;
            color: @text-color;
            font-weight: 900;
        }

        em {
            margin-top: 5px;
        }
    }

    .app-header-dropdown-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
        font-size: floor(80px / 2); // for FA icons

        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .6);
        border-radius: 50%;
        line-height: 0;

        // for FA icons
        color: @gray-light !important;

        // for SVG icons
        fill: @gray-light !important;
        stroke: @gray-light !important;

        img {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .app-header-dropdown-empty {
        padding: 15px;
        text-align: center;
        font-family: @headings-font-family;
        font-weight: bold;

        > small {
            display: block;
            margin-top: 5px;
            font-family: @font-family-base;
            font-weight: normal;
            font-style: italic;
        }
    }

    .app-header-dropdown-footer {
        background: @panel-footer-bg;
        border-top: 1px solid @list-group-border;
    }

    .alert {
        font-weight: bold;
        border-radius: 0;
        margin: 0;
    }
}

.app-header-user {
    .user-avatar {
        color: @top-bar-link-color;
        // for picture
        max-height: 30px;

        &.fa {
            background: @top-bar-link-color;
            width: 30px;
            height: 30px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            color: @top-bar-bg;
            font-size: 24px;
            padding-top: 6px;
            border: 2px solid @top-bar-link-color;
        }
    }
}

.app-current-user {
    .app-current-user-body {
        padding: floor(@grid-gutter-width / 2);
        border-top: 1px solid @list-group-border;
    }

    .app-current-user-footer {
        padding: 5px floor(@grid-gutter-width / 2);
        display: flex;
        flex-direction: row;
        align-items: center;
        background: @panel-footer-bg;
    }

    .app-current-user-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px; // todo : calculate
        background: white;

        .fa {
            margin-right: 0; // because there is a hack in styles to add margins on dropdown icons
        }

        + .app-current-user-btn {
            margin-left: 5px;
        }
    }

    .app-current-locale {
        .locale-icon {
            margin: 0 @icon-text-spacer 0 0;
        }

        + .app-current-user-btn {
            margin-left: auto;
        }
    }
}

// TODO : move elsewhere. This is the styles for one implementation of .app-header-main
.app-header-search {
    padding: 0 15px;
    flex: 1;
    font-size: @font-size-large;
    display: flex;
    align-items: stretch;

    .dropdown {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dropdown-menu {
        padding: 0;
    }

    .form-control {
        font-family: @headings-font-family;
        color: @top-bar-link-color;
        background: lighten(@top-bar-link-bg, 8%); // #393939 TODO : use a var (if the bg is light it will not work)
        border-color: transparent;
        box-shadow: none;

        .placeholder(@top-bar-color);
    }

    .result-header {
        color: @brand-primary;
        font-weight: bold;
        padding: 10px;
        margin: 0;
        font-style: italic;
        background: @panel-default-heading-bg;
        border-top: 1px solid @data-card-border;
        border-bottom: 1px solid @data-card-border;

        &:first-child {
            border-top: none;
        }
    }
}

@media (max-width: @screen-md-max) {
    .app-header-search {
        .dropdown {
            width: 100%;
        }
    }
}
