/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    TREE MENU
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* TOP MENU */

.tree-menu-panel {
    background-color: #fff;
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    outline: 0;
    padding: 1rem 0;
    position: fixed;
    top: var(--header-height);
    width: 100%;
    z-index: 9998;
}

@media screen and (min-width: 992px) {
    .tree-menu-panel {
        padding: 2rem 0;
    }
}

.tree-menu-panel-content {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    margin: 0 auto;
    max-height: 100%;
    overflow-y: scroll;
    scrollbar-color: var(--color-grey-dark) var(--color-grey-light);
    scrollbar-width: thin;
    transition: height 0.4s ease-in-out;
}

@media (min-width: 768px) {
    .tree-menu-panel-content {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .tree-menu-panel-content {
        flex-direction: row;
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .tree-menu-panel-content {
        margin: 0 auto;
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .tree-menu-panel-content {
        max-width: 1320px;
    }
}

.tree-menu-panel-content.hide-scrollbar-thumb {
    scrollbar-color: transparent transparent;
}

.tree-menu-panel-content::-webkit-scrollbar {
    display: initial;
    width: 11px;
}

.tree-menu-panel-content::-webkit-scrollbar-track {
    background: var(--color-grey-light);
}

.tree-menu-panel-content::-webkit-scrollbar-thumb {
    background-color: var(--color-grey-dark);
    border-radius: 6px;
    border: 3px solid var(--color-grey-light);
}

.tree-menu-panel-content.hide-scrollbar-thumb::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-color: transparent;
}

.tree-menu-panel-content-list {
    flex-basis: 65%;
}

.tree-menu-panel-content-list>.nav>.nav-item:first-child {
    border: 0;
}

.tree-menu-panel-content-list>.nav>.nav-item>*>.nav-link {
    text-transform: uppercase;
}

.tree-menu-panel-content-quick-links {
    flex-basis: 35%;
    margin-top: 1rem;
    text-align: start;
}

@media (min-width: 992px) {
    .tree-menu-panel-content-quick-links {
        margin-top: 0;
        position: sticky;
        top: 0;
    }
}

.tree-menu-panel-content-quick-links p {
    padding-left: 0.75rem;
}

.tree-menu-panel-content-quick-links ul {
    list-style: none;
    padding: 0;
}

.tree-menu-panel-content-quick-links ul+p {
    margin-top: 2.5rem;
}

.tree-menu-panel-content-quick-links li {
    display: flex;
}

.tree-menu-panel-content-quick-links a {
    flex-grow: 1;
    text-decoration: none;
    padding: 0.75rem;
}

.tree-menu-panel-content-quick-links *:last-child {
    margin-bottom: 0;
}

/* Designsystem adds a negative margin to nav-expandable and we need to remove that to avoid
   overlapping buttons in top navigation */
.layout-header-buttons .nav-expandable {
    margin: 0;
}


/* MISCELLANEOUS */

/* On touch devices, the hover effect of buttons should be removed on the expand button (the header
   button is handled in the button module) */
@media (hover: none) {
    .nav-expandable .nav-item .nav-button:hover {
        background-color: transparent !important;
        border-bottom: 1px solid var(--color-grey) !important;
        border-left: 1px solid var(--color-grey) !important;
    }

    .navbar-collapse>ul>li:first-child>div>button:hover,
    .tree-menu-panel-content-list>ul>li:first-child>div>button:hover {
        border-top: 1px solid var(--color-grey);
    }
}

/* Place menu item buttons above any background decoration and we do not want the button to have
  decreased padding as other buttons in the header so we reset the padding. This is important when
  using screen readers on small devices. */
.nav-expandable .nav-item button {
    padding: 0.45rem 0.8rem !important;
    z-index: 1;
}

/* We do not want the text of each menu item to be truncated as other texts in the header so we
   reset the white-space. We also want to hyphenate the text to avoid long words to overflow
   especially on small devices or when user zooms in. */
.nav-expandable .nav-link {
    -webkit-hyphenate-limit-after: 5;
    -webkit-hyphenate-limit-before: 4;
    hyphenate-limit-chars: 10 4 5;
    hyphens: auto;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

/* Designsystemet v8.0 has an issue where the first menu item in top navigation does not get a
   border-top. This is a workaround to add the border while waiting for the issue to be fixed in the
   design system. */

.tree-menu-panel-content-list>ul>li:first-child>div>a,
.tree-menu-panel-content-list>ul>li:first-child>div>button {
    border-top: 1px solid var(--color-grey);
}