
@use "sass:math";

// todo : write a mixin to generate menu btns variant (for shortcuts, search btn, menu items)

.app-menu {
    position: sticky;
    overflow-y: auto; // gets its own scrollbar
    max-width: $toolbar-size;
    width: 100%;
    top: $top-bar-height;
    //top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background-color: $toolbar-bg;
    color: $toolbar-color;

    .app-menu-header {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        flex-shrink: 0;
    }

    .app-menu-title {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1;
        padding: 10px ($grid-gutter-width * .5);
        margin: 0;
        font-family: $font-family-base;
    }

    .app-menu-status {
        background-color: $toolbar-link-hover-bg;
        padding: ($grid-gutter-width * .5);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;

        .user-avatar {
            max-width: 70px;
            max-height: 70px;
            font-size: 70px;
        }

        .gauge {
            flex-shrink: 0;
        }

        .app-menu-status-info {
            flex: 1 0;
            margin-left: ($grid-gutter-width * .5);
            font-size: $font-size-sm;
            color: $toolbar-link-color;

            h3 {
                margin-bottom: map-get($spacers, 1);
                color: $toolbar-color;
                display: flex;
                justify-content: space-between;
            }
        }

        .app-menu-status-toolbar {
            flex: 1 0 100%;
            text-align: right;

            > .btn-link {
                text-transform: uppercase;
                padding: 0;
                border: none;
                color: $toolbar-link-color;

                &:hover {
                    color: $toolbar-link-hover-color;
                }
                &:focus {
                    color: $toolbar-link-active-color;
                }
            }
        }

        + .app-menu-shortcuts {
            margin-top: 2px;
        }

        + .app-menu-section .app-menu-section-toggle {
            margin-top: 2px;
        }
    }

    .app-menu-impersonation {
        @include gradient-striped($toolbar-bg, 45deg);

        background-size: 100px 100px;
    }

    .app-menu-shortcuts {
        display: flex;
        flex-direction: row;
        align-items: center;

        .app-menu-shortcuts-btn {
            flex: 1;
            font-size: 16px;
            padding-left: 10px;
            padding-right: 10px;
            color: $toolbar-link-color;
            background: $toolbar-link-hover-bg;
            border-color: transparent;
            box-shadow: none;

            + .app-menu-shortcuts-btn {
                margin-left: 2px;
            }
        }

        + .app-menu-section .app-menu-section-toggle {
            margin-top: 2px;
        }
    }

    .app-menu-section {
        &:first-of-type {
            margin-top: auto;
        }

        &.opened {
            flex: 1;
        }

        .app-menu-section-title {
            margin: 0;
        }

        .app-menu-section-toggle {
            text-align: left;
            padding: ($grid-gutter-width * .5);
            display: flex;
            align-items: center;
            width: 100%;
            color: $toolbar-color;

            margin-bottom: 2px;
            background: $toolbar-link-hover-bg;

            .toggle {
                font-size: 12px;
                margin-left: auto;
            }
        }
    }

    .app-menu-back {
        flex: 0;
    }

    .list-group-item {
        //font-style: italic;
        padding-left: $grid-gutter-width !important;

        &.active {
            padding-left: 26px !important;
            border-left: 4px solid $toolbar-active-color;
        }

        &.danger {
            color: $brand-danger;

            &:hover,
            &:focus {
                color: white;
                background: $brand-danger;
            }

            &.disabled {
                opacity: .65; // same than standard button
                color: $brand-danger;
                background: transparent;
            }
        }
    }

    .list-group-item,
    .app-menu-back {
        display: block;
        width: 100%;
        padding: ($grid-gutter-width * .5);
        line-height: 1;
        color: $toolbar-link-color;
        background: $toolbar-link-bg;
        border: none;

        &:hover {
            color: $toolbar-link-hover-color;
            background: $toolbar-link-hover-bg;
        }

        &:focus,
        &:active,
        &.active {
            &,
            &:hover,
            &:focus {
                color: $toolbar-link-active-color;
                background-color: $toolbar-link-active-bg;
            }
        }

        &[disabled],
        &.disabled {
            // avoid focus or hover effect on disabled
            &,
            &:hover,
            &:focus {
                color: $toolbar-link-disabled-color;
                background-color: $toolbar-link-disabled-bg;
            }

            // preserve active state on disabled (because active links are disabled)
            &.active {
                &,
                &:hover,
                &:focus {
                    color: $toolbar-link-active-color;
                    background: $toolbar-link-active-bg;
                    opacity: 1;
                }
            }
        }
    }
}

.app-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.app-menu-search {
    padding: ($grid-gutter-width * .5);

    .form-control {
        color: $toolbar-link-hover-color;
        background: lighten($toolbar-bg, 8%);
        border-color: transparent;
        box-shadow: none;

        &::placeholder {
            color: $toolbar-link-color;
        }
    }
}

// XS/SM screens :
@media (max-width: map-get($grid-breakpoints, 'md')) {
    .app-menu {
        position: absolute;
        z-index: 4;
        @include box-shadow(0 0 3px 1px rgba(0, 0, 0, 0.5));
    }
}
