.accordian-menu-container {
}

.accordian-menu-navigator {
    position: relative;
    /*width: calc(100% - 20px);*/ /* NOTE: A width of 100% on a fixed position div does not return as you would expect. Therefore, adjust on the JS side. */
    height: 30px;
    position: fixed;
    z-index: 1;
    background-color: white;
}

.accordian-menu-spacer {
    height:30px;
}

.accordian-menu-navigator-back {
    display: inline-block;
    margin-left:10px;
    left: 0px;
    width: 20px;
    height: 20px;
    background-image: var(--sherpa-action-area-arrow-left-icon);
    background-repeat: no-repeat;
}

.accordian-menu-navigator-forward {
    display: none;
    width: 20px;
    height: 20px;
    background-image: var(--sherpa-action-area-forward-icon);
    background-repeat: no-repeat;
}

.accordian-menu-item {
    position: relative;
    height: 20px;
    padding-left: 20px;
    padding-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: var(--sherpa-font-family);
    font-size: calc(var(--sherpa-font-base-size) + 0px);
    font-weight: 600;
    color: var(--sherpa-menu-left-color);
}

.accordian-menu-item-arrow-right {
    display: inline-block;
    position: absolute;
    left: calc(100% - 40px);
    top: 20px;
    background-image: var(--sherpa-action-area-arrow-right-icon);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

.accordian-menu-item-selected-arrow {
    display: inline-block;
    position: absolute;
    left: calc(100% - 40px);
    top: 20px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

.accordian-menu-item-selected-arrow-down {
    background-image: var(--sherpa-action-area-arrow-down-white-icon);
}

.accordian-menu-item-selected-arrow-right {
    background-image: var(--sherpa-action-area-arrow-right-white-icon);
}

.accordian-menu-item-selected {
    background-color: var(--sherpa-menu-left-color);
    color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /*
    animation-name: popIn;
    animation-duration: 0.1s;
    */
}

.accordian-menu-item-selected-collapsed {
    border-bottom-left-radius: 5px;     /* if the selected item is collapsed, or if it has no children, then we want to round the bottom corners. */
    border-bottom-right-radius: 5px;    /* if the selected item is collapsed, or if it has no children, then we want to round the bottom corners. */
}

.accordian-menu-item-child-of-selected {
    border-left: 1px solid var(--sherpa-menu-left-color);
    border-right: 1px solid var(--sherpa-menu-left-color);
    animation-name: popIn;
    animation-duration: 0.2s;
}

.accordian-menu-item-last-child-of-selected {
    border-bottom: 1px solid var(--sherpa-menu-left-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.accordian-menu-item-hidden-child-of-selected {
    /*display: none;*/
    height: 0px;            /* At the end of the animation, we will collapse to a height of zero. */
    margin-renamed: 0px;
    padding-top: 0px;       /* At the end of the animation, we will collapse to no top/bottom padding. */
    padding-bottom: 0px;    /* At the end of the animation, we will collapse to no top/bottom padding. */
    opacity: 0.0;           /* At the end of the animation, we will be at zero opacity. */
    overflow: hidden;       /* At the end of the animation, we will hide all of our overflow. */
    animation-name: popOut;
    animation-duration: 0.2s;
    border-bottom-renamed: 0px solid var(--sherpa-menu-left-color);
}

@keyframes popIn {
    from {
        height: 0px;
        opacity: 0.0;
    }

    to {
        height: 20px;
        opacity: 1.0;
    }
}

@keyframes popOut {
    from {
        height: 20px;           /* At the start of the animation, we need to duplicate the item's existing height. */
        opacity: 1.0;           /* At the start of the animation, we need to be at full opacity. */
        padding-top: 20px;      /* At the start of the animation, we need to duplicate the item's existing top/down padding. */
        padding-bottom: 20px;   /* At the start of the animation, we need to duplicate the item's existing top/down padding. */
    }

    to {
        height: 0px;            /* At the end of the animation, we need to be at zero height. */
        opacity: 0.0;           /* At the end of the animation, we need to be at zero opacity. */
        padding-top: 0px;       /* At the end of the animation, we need to reduce the item's existing padding to zero. */
        padding-bottom: 0px;    /* At the end of the animation, we need to reduce the item's existing padding to zero. */
    }
}