@import "dxHelpers/commonSidebar";

dx-empty-state {
    --dx-c-empty-state-background-alt: var(--sds-g-gray-1);
    --dx-c-empty-state-image-width: 400px;
    --dx-c-font-title-alt-size: 18px;
    --dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
    --dx-c-font-body-alt-size: var(--dx-g-text-xs);
    --dx-c-font-body-alt-margin-top: 0;
    --dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
    --dx-c-font-suggestion-alt-size: 10px;

    display: none;
}

.sidebar-content {
    overflow-y: auto;
    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
}

.loading-skeleton {
    margin-top: var(--dx-g-spacing-md);
}

.search-empty.container dx-empty-state {
    display: block;
}

.user-searching.container .sidebar-content-tree {
    display: none;
}

.show-tree.container .sidebar-content-search {
    display: none;
}

.container.collapsed .sidebar-header,
.container.collapsed .sidebar-content {
    display: none;
}

.header-toggle-icon dx-button {
    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);

    width: 10px;
}

.header-toggle-icon dx-button[aria-expanded="true"] {
    --dx-c-button-secondary-color-hover: transparent;
}

.header-toggle-icon dx-button[aria-expanded="true"]:hover {
    --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
}

.results-heading {
    --dx-g-text-body-color: var(--sds-g-gray-14);

    margin-bottom: var(--dx-g-spacing-sm);
    padding-top: var(--dx-g-spacing-smd);
    font-weight: var(--dx-g-font-bold);
}

@media (max-width: 768px) {
    :host {
        width: 100%;
    }

    .loading-skeleton {
        width: 100%;
    }
}