/* @define JobAndJobGroupHeaderNavigationDropdown */

/* stylelint-disable plugin/selector-bem-pattern */
.JobAndJobGroupHeaderNavigationDropdown-dropdownButton .dropdown-menu {
    width: 500px;
    max-width: 100vw;
    padding: 0;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    margin-top: 8px;
}

.JobAndJobGroupHeaderNavigationDropdown-dropdownButton .dropdown-toggle {
    background: var(--surface-subtle-light);
    color: var(--primary);
    border: none;
}

.JobAndJobGroupHeaderNavigationDropdown-dropdownButton.show .btn-secondary.dropdown-toggle,
.JobAndJobGroupHeaderNavigationDropdown-dropdownButton .btn-secondary.dropdown-toggle:focus,
.JobAndJobGroupHeaderNavigationDropdown-dropdownButton .btn-secondary.dropdown-toggle:active {
    color: var(--primary);
    background: var(--surface-accent);
    box-shadow: 0 0 0 3.2px #d8d9db40;
}

.dropdown-menu a.JobAndJobGroupHeaderNavigationDropdown-treeListItem {
    padding: 16px 12px;
    line-height: 1;
    position: relative;
    margin-bottom: 0;
    border: 1px solid var(--border-subtle);
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItemToggle--isOpen i {
    transform: rotate(90deg);
}

/* stylelint-enable plugin/selector-bem-pattern */

.JobAndJobGroupHeaderNavigationDropdown-treeListItemTitle {
    font-weight: var(--font-weight-bold);
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItem:hover .JobAndJobGroupHeaderNavigationDropdown-treeListItemTitle {
    text-decoration: underline;
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItem:hover {
    text-decoration: none;
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItem::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 0;
    background-color: transparent;
    left: 0;
    z-index: -1;
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItem:hover::after {
    background-color: var(--surface-list-item-hover);
}

.JobAndJobGroupHeaderNavigationDropdown-treeAvatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--icon-inverse);
    background-color: var(--surface-eng-00);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItem--rootNode .JobAndJobGroupHeaderNavigationDropdown-treeAvatar {
    background-color: var(--surface-eng-01);
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItem--leafNode .JobAndJobGroupHeaderNavigationDropdown-treeAvatar {
    background-color: var(--surface-data-secondary);
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItem--isSelected {
    background-color: var(--surface-list-item-selected-light);
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItemToggle {
    border-radius: 50%;
    background-color: transparent;
    border: none;
    transition: transform 150ms ease-in;
    width: 25px;
    height: 25px;
}

.JobAndJobGroupHeaderNavigationDropdown-treeListItemCount {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--surface-subtle-dark);
    color: var(--text-accent);
    font-weight: var(--font-weight-bold);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}