﻿.subMenu__root {
    -archetype: paintBox;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.subMenu__root.subMenu--isCurrentPage,.subMenu__root.subMenu--isCurrentPage .subMenu__label,.subMenu__root.subMenu--isHovered,.subMenu__root.subMenu--isHovered .subMenu__label {
    transition: all .08s linear
}

.subMenu__container {
    -archetype: box;
    align-items: center;
    display: flex;
    height: 100%
}

.subMenu__label {
    -archetype: text;
    -controller-part-type: LayoutChildDisplayDropdown;
    transition: inherit;
    white-space: nowrap
}

.subMenu__itemWrapper {
    flex-grow: inherit
}

.subMenu__positionBox {
    display: none;
    margin: auto;
    position: fixed;
    z-index: var(--position-box-z-index,47)
}

.subMenu__positionBox.subMenu--isColumn {
    left: 0;
    position: absolute;
    right: 0
}

.subMenu__positionBox.subMenu--isStretched {
    max-width: unset
}

@keyframes subMenu__fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.subMenu__animationBox {
    animation-delay: calc(var(--is-animated) * .05s);
    animation-duration: calc(var(--is-animated) * .1s);
    animation-fill-mode: forwards;
    max-height: var(--max-height,none);
    opacity: 0;
    overflow-y: var(--overflow-y,visible);
    transition: border-color .08s cubic-bezier(.25,1,.5,1),box-shadow .08s cubic-bezier(.25,1,.5,1)
}

.subMenu__positionBox.subMenu--isStretched>.subMenu__animationBox {
    width: 100%
}

.subMenu__positionBox.subMenu--isStretched .subMenu__megaMenuComp {
    width: 100%!important
}

.subMenu__alignBox {
    display: flex
}

.subMenu__list {
    -moz-column-gap: calc(1px * var(--horizontalSpacing));
    column-gap: calc(1px * var(--horizontalSpacing))
}

.subMenu__itemWrapper[data-hovered]>.subMenu__positionBox {
    display: block;
    visibility: hidden
}

.subMenu__itemWrapper[data-shown]>.subMenu__positionBox {
    display: block;
    visibility: visible
}

.subMenu__itemWrapper[data-hovered]>.subMenu__positionBox>.subMenu__animationBox {
    animation-name: subMenu__fadeIn
}

.subMenu__megaMenuComp {
    direction: ltr;
    flex-shrink: 0;
    margin-top: var(--containerMarginTop)!important;
    padding: 0!important
}

.subMenu__itemWrapper:not([data-hovered]) .subMenu__megaMenuComp {
    display: none
}

/*
.subMenu-container{
    display:block;
    opacity: 1;
}
*/

.subMenu-layout{
    display:block;
    opacity: 1;
}
