/*  UI-MENU - PRELIMINARY
    This file preceeds work needed to be done to create ui-menu in the AmplifyUI library as a web component. 
    Below are the necessary CSS variables to support theming of the ui-menu. Simply add ui-menu attribute to any 
    UL/OL HTML element and all below variables will be available.

    Once ui-menu is available in AmplifyUI and all project references are updated from the attribute to the 
    component, this file can be safely deleted. 
*/
/*header {
    background: var(--header-background);
    color: var(--header-color);
    display: var(--header-display);
    position: var(--header-position);
    z-index: var(--header-z-index);
}
header [ui-wrapper] {
    align-items: var(--header-align-items);
    display: var(--header-display);
    flex: var(--header-flex);
    flex-direction: var(--header-flex-direction);
    justify-content: var(--header-justify-content);
    padding: var(--header-padding);
}
[ui-branding] {
    display: var(--branding-display);
    flex: var(--branding-flex);
    margin: var(--branding-margin);    
}
[ui-branding] a {
    display: var(--branding-display);
    padding: var(--branding-padding); 
}
[ui-branding] a img {
    max-width: var(--branding-max-width);
    max-height: var(--branding-max-height);
    width: var(--branding-width);
    height: var(--branding-height);
}
nav {
    background: var(--nav-background);
    color: var(--nav-color);
    display: var(--nav-display);
    justify-content: var(--nav-justify-content);
    position: var(--nav-position);
    z-index: var(--nav-z-index);
}
nav [ui-wrapper] {
    align-items: var(--nav-align-items);
    display: var(--nav-display);
    flex: var(--nav-flex);
    flex-direction: var(--nav-flex-direction);
    padding: var(--nav-padding);
}
[ui-menu] {
    align-items: var(--menu-align-items);
    background: var(--menu-background);
    border-color: var(--menu-border-color);
    border-radius: var(--menu-border-radius);
    border-style: var(--menu-border-style);
    border-width: var(--menu-border-width);
    color: var(--menu-color);
    display: var(--menu-display);
    flex: var(--menu-flex);
    flex-direction: var(--menu-flex-direction);
    flex-wrap: var(--menu-flex-wrap);
    justify-content: var(--menu-justify-content);
    list-style: var(--menu-list-style);
    margin: var(--menu-margin);
    max-width: var(--max-width);
    padding: var(--menu-padding);
    position: var(--menu-position);
}
[ui-menu] > li {
    border-color: var(--menu-item-border-color);
    border-radius: var(--menu-item-border-radius);
    border-style: var(--menu-item-border-style);
    border-width: var(--menu-item-border-width);
    display: var(--menu-item-display);
    flex: var(--menu-item-flex);
    flex-direction: var(--menu-item-flex-direction);
    flex-wrap: var(--menu-item-flex-wrap);
    height: var(--menu-item-height);
    margin: var(--menu-item-margin);
    min-width: var(--menu-item-min-width);
    position: var(--menu-item-position);
    width: var(--menu-item-width);
}
[ui-menu] > li > a {
    align-items: var(--menu-item-align-items);
    background: var(--menu-item-background);
    color: var(--menu-item-color);
    display: var(--menu-item-display);
    font-size: var(--menu-item-font-size);
    font-weight: var(--menu-item-font-weight);
    justify-content: var(--menu-item-justify-content);
    padding: var(--menu-item-padding);
    text-decoration: var(--menu-item-text-decoration);
    text-transform: var(--menu-item-text-transform);
}
[ui-menu] > li[is-active] > a {
    align-items: var(--menu-item-active-align-items, var(--menu-item-align-items));
    background: var(--menu-item-active-background, var(--menu-item-background));
    color: var(--menu-item-active-color, var(--menu-item-color));
    display: var(--menu-item-active-display, var(--menu-item-display));
    font-size: var(--menu-item-active-font-size, var(--menu-item-font-size));
    font-weight: var(--menu-item-active-font-weight, var(--menu-item-font-weight));
    justify-content: var(--menu-item-active-justify-content, var(--menu-item-justify-content));
    padding: var(--menu-item-active-padding, var(--menu-item-padding));
    text-decoration: var(--menu-item-active-text-decoration, var(--menu-item-text-decoration));
    text-transform: var(--menu-item-active-text-transform, var(--menu-item-text-transform));
}
[ui-menu] > li ul {
    background: var(--sub-menu-background);
    border-color: var(--sub-menu-border-color);
    border-radius: var(--sub-menu-border-radius);
    border-style: var(--sub-menu-border-style);
    border-width: var(--sub-menu-border-width);
    bottom: var(--sub-menu-bottom);
    color: var(--sub-menu-color);
    display: var(--sub-menu-display);
    flex: var(--sub-menu-flex);
    flex-direction: var(--sub-menu-flex-direction);
    left: var(--sub-menu-left);
    list-style: var(--sub-menu-list-style);
    margin: var(--sub-menu-margin);
    min-width: var(--sub-menu-min-width);
    padding: var(--sub-menu-padding);
    position: var(--sub-menu-position);
    right: var(--sub-menu-right);
    top: var(--sub-menu-top);
    transition: var(--sub-menu-transition);
    z-index: var(--sub-menu-z-index);
}
[ui-menu] ul > li {
    border-color: var(--sub-menu-item-border-color);
    border-radius: var(--sub-menu-item-border-radius);
    border-style: var(--sub-menu-item-border-style);
    border-width: var(--sub-menu-item-border-width);
    display: var(--sub-menu-item-display);
    flex: var(--sub-menu-item-flex);
    flex-direction: var(--sub-menu-item-flex-direction);
    flex-wrap: var(--sub-menu-item-flex-wrap);
    height: var(--sub-menu-item-height);
    margin: var(--sub-menu-item-margin);
    min-width: var(--sub-menu-item-min-width);
    position: var(--sub-menu-item-position);
    width: var(--sub-menu-item-width);
}
[ui-menu] ul > li > a {
    align-items: var(--sub-menu-item-align-items);
    background: var(--sub-menu-item-background);
    color: var(--sub-menu-item-color);
    display: var(--sub-menu-item-display);
    font-size: var(--sub-menu-item-font-size);
    font-weight: var(--sub-menu-item-font-weight);
    justify-content: var(--sub-menu-item-justify-content);
    padding: var(--sub-menu-item-padding);
    text-transform: var(--sub-menu-item-text-transform);
}*/
body.shift {
    padding-left: 120vw;
    overflow: hidden;
}
[ui-menu] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

[ui-menu] li {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    position: relative;
}
[ui-menu] > li:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
[ui-menu] li a {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    text-decoration: none;
    height: 100%;
}
[ui-menu] li a + a {
    flex: 0 1 auto;
}
[ui-menu] li a span:nth-child(2) {
    margin-left: 1em;
}
[ui-menu] > li[is-active] {
    flex-wrap: wrap;
    z-index: 99;
}
[ui-menu] > li[is-active] > a {
    align-items: center;
    display: flex;
    text-decoration: none;
}
[ui-menu] li ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: -999em;
}
[ui-menu] li[is-active] > ul {
    flex: 1 0 auto;
    width: 100%;
    position: relative;
    left: 0;
}
[ui-menu] li[is-active] > ul li[is-active] ul {
    left: 100%;
    top: 0;
}
[ui-menu] li[is-active][is-edge] > ul {
    flex: 1 0 100%;
    right: 0;
    left: auto;
}
[ui-menu] li[is-active][is-edge] > ul li[is-active] ul {
    left: auto;
    right: 100%;
    top: 0;
}
[ui-menu] li > * {
    padding: 1.25em 1.5em;
    white-space: normal;
    text-decoration: none;
}
[ui-menu] [ui-icon] {}
[ui-menu] [ui-icon*="framed"] {
    font-size: 18px;
    border-radius: 50%;
    padding: 0.35em;
}
[ui-menu] li a span {
    /* 
        IMPORTANT: We override pointer event for span here to preserve event 
        handling and override pattern. Removing will make click overrides fail.

        This may be working now with new click handling
    */
    pointer-events: none;
}
@supports (-ms-ime-align: auto) {
    [ui-menu] {
        display: block;
    }
}
@media screen and (min-width: 992px) {
    [ui-menu] > li[is-active] ul {
        min-width: 300px;
        position: absolute;
        top: 100%;
    }

    @supports(-ms-ime-align: auto) {
        [ui-menu] {
            display: flex;
        }
    }
}