:root {
    --accordian-menu-item-row-height-total: var(--sherpa-menu-left-row-height); /*45px*/
    --accordian-menu-item-row-height: 20px;
    --accordian-menu-item-row-padding-vertical: calc(calc(var(--accordian-menu-item-row-height-total) - var(--accordian-menu-item-row-height)) / 2);
    --accordian-menu-item-row-arrow-top: calc(var(--accordian-menu-item-row-padding-vertical) - 2px);
}
.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: var(--accordian-menu-item-row-height);
    background-image: var(--sherpa-action-area-arrow-left-icon);
    background-repeat: no-repeat;
}

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

.accordian-menu-item {
    position: relative;
    min-height: var(--accordian-menu-item-row-height);
    padding-left: 20px;
    padding-right: 40px;
    padding-top: var(--accordian-menu-item-row-padding-vertical); /*20px;*/
    padding-bottom: var(--accordian-menu-item-row-padding-vertical);
    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: var(--accordian-menu-item-row-arrow-top);
    background-image: var(--sherpa-action-area-arrow-right-icon);
    background-repeat: no-repeat;
    width: 20px;
    height: var(--accordian-menu-item-row-height);
}

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

.accordian-menu-item-selected-arrow-down {
    left: calc(100% - 43px);
    background-image: var(--sherpa-action-area-arrow-down-white-icon);
}

.accordian-menu-item-selected-arrow-right {
    left: calc(100% - 40px);
    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;*/
    min-height: 0px;        /* At the end of the animation, we will collapse to a height of zero. */
    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. */
    }
}