@mixin menuColor($color, $icon) {
    border-color: $color;

    h3 {
        @include newIconAfter($icon);

    }

    &:hover h3:after,
    &:hover h3>*,
    .ui-state-active:after,
    .ui-state-active>* {
        color: darken(desaturate($color, 20%), 40%)
    }

    li.elem.ui-state-focus,
    li.elem:not(.hr):not(.category):hover {
        background-color: lighten($color, 20%);

        * {
            color: $gris900;
        }
    }
}

#menu li.elem.subtitle {
    padding: 3px 10px;
    background-color: #E2E2E2;
    font-weight: bold;
}

#menu li.elem.subtitle:hover {
    background-color: #E2E2E2;
}

body #menu {
    background: $blanc;

    ul,
    li {
        list-style: none;
    }

    ul#menu-list {
        display: grid;

    }

    ul>li.rubrik {
        border-left: .85em solid;
        display: block;

        h3 {
            border-radius: 0;
            border: none;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: space-between;
            padding: .75em 1em;
            font-weight: 700;


            >*,
            &:after {
                color: $gris700;
                transition: color 75ms;
            }

            &:after {
                margin-right: .5em;
                font-size: 1.5em;
            }

            a {
                margin-right: auto;
                @include firstLetterCapitalized;
            }
        }

        /* Items au survol et separateurs */
        li.elem {
            font-size: 12px;
            font-weight: 700;
            border-radius: .5em;
            border-left: none;
            margin: .25em 0;
            @include firstLetterCapitalized;


            &.category {
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                margin-bottom: 0;

                +.hr {
                    margin-top: 0;
                    margin-left: -5px;
                }
            }

            &.ui-state-focus {
                border-left: none;
            }

            a {
                background: none;
                padding: .5em .5em .5em 1.5em;
                text-decoration: none;
                color: $gris700;
                display: block;
                width: 100%;
                @include firstLetterCapitalized;

                &::before {
                    content: unset;
                }
            }

            +li.category {
                margin-top: 1em;
            }

            &.hr {
                height: 0px;
                background: transparent;
                border-top: 1px solid $gris200;
                margin-left: 1em;

                +li.hr {
                    display: none;
                }

            }
        }

        // Couleurs
        &.autorisation {
            @include menuColor($autorisation, "\EA8A")
        }

        &.guichet_unique {
            @include menuColor($guichetUnique, "\EA48")
        }

        &.qualification {
            @include menuColor($qualification, "\EEB9")
        }

        &.instruction {
            @include menuColor($instruction, "\ED8A")
        }

        &.contentieux {
            @include menuColor($contentieux, "\ED86")
        }

        &.suivi {
            @include menuColor($suivi, "\EBBE")
        }

        &.demande_avis {
            @include menuColor($demandesAvis, "\F1C7")
        }

        &.numerisation {
            @include menuColor($numerisation, "\F041")
        }

        &.edition {
            @include menuColor($exportImport, "\F0F9")
        }

        &.parametrage-dossier {
            @include menuColor($parametrageDossiers, "\ED76")
        }

        &.parametrage {
            @include menuColor($parametrageApp, "\F0E6")
        }

        &.administration {
            @include menuColor($administration, "\F162")
        }
    }

    li.rubrik {

        h3 {


            a {
                text-decoration: none;
                padding: 0;
            }

            span {
                font-size: 18px;
                background: none;
                font-family: 'remixicon' !important;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;

                &.ui-icon-triangle-1-s::before {
                    content: "\EA4E";

                }

                &.ui-icon-triangle-1-e::before {
                    content: "\EA6E";

                }
            }

            &.ui-state-hover {
                background: transparent;
            }
        }
    }

    div.rubrik {
        background: $blanc;
        padding: 1em;
    }

    .ui-icon {
        display: block;
        text-indent: unset;
        width: unset;
        height: unset;
    }

    .ui-widget :active {
        outline: none;
    }

    .ui-accordion .ui-accordion-content {
        border: none;
        display: none;
    }

    .ui-accordion .ui-accordion-content-active {
        display: block;
    }
}


// Legacy - layout_jquery_before.css
/* MENU */
#menuopen_val {
    display: none;
}

// Legacy app_poc.css 

.ui-accordion .ui-accordion-header {
    cursor: pointer;
    zoom: 1;
}

.ui-accordion .ui-accordion-header-active {
    border-bottom: 0 !important;
}

.ui-accordion-icons .ui-accordion-header a {
    padding-left: 2.2em;
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    margin-top: -2px;
    position: relative;
    top: 1px;
    margin-bottom: 2px;
    overflow: auto;
    display: none;
    zoom: 1;
}

.ui-accordion .ui-accordion-content-active {
    display: block;
}