@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    --dx-c-sidebar-width: 337px;
    --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
    --dx-c-sidebar-button-background: white;
    --dx-c-sidebar-button-border: white;
    --dx-c-sidebar-button-color-hover: white;
    --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
    --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
    --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
    --doc-version-picker-width: 296px;
}

.header {
    box-sizing: content-box;
    display: flex;
    line-height: var(--dx-g-spacing-xl);
    margin-bottom: 12px;
}

.mobile-header {
    display: flex;
    line-height: var(--dx-g-spacing-xl);
    margin-bottom: 12px;
}

.padding-horizontal {
    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-c-sidebar-left-padding);
}

.sidebar-header[show-shadow="true"] {
    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
}

.header-title {
    line-height: 28px;
    letter-spacing: -0.08px;
    font-size: var(--dx-g-text-lg);
    font-weight: var(--dx-g-font-demi);
}

.header-toggle-icon {
    margin: auto 0 auto auto;
    color: var(--dx-g-blue-vibrant-30);
}

.container.collapsed {
    width: var(--dx-g-spacing-xl);
}

.container.collapsed .header {
    padding-left: var(--dx-g-global-header-padding-horizontal);
}

.header-wrapper {
    --dx-c-icon-color: var(--dx-g-blue-vibrant-20);

    display: flex;
    flex-direction: column;
    gap: var(--dx-g-spacing-xs);
}

.subtitle {
    color: var(--dx-g-blue-vibrant-20);
    font-weight: var(--dx-g-font-bold);
}

.link-row a {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: var(--dx-g-font-bold);
    gap: var(--dx-g-spacing-xs);
    color: var(--dx-g-blue-vibrant-20);
}

.container {
    background-color: white;
    display: flex;
    flex-direction: column;
    height: var(--dx-c-sidebar-height);
    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
}

.container:not(.container-mobile) {
    --border-color: transparent;
    --left-spacing: calc(
        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
    );

    box-shadow: 2px 0 0 0 var(--border-color);
    min-height: var(--dx-c-sidebar-min-height);
    padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
    position: relative;
}

.collapsed.container:not(.container-mobile) {
    background-color: transparent;
}

.collapsed.container:not(.container-border-active) {
    --border-color: transparent;
}

.container.container-mobile {
    width: 100%;
}

.container.container-mobile .header {
    cursor: pointer;
    line-height: var(--dx-g-spacing-2xl);
}

.container.container-mobile:not(.collapsed) .header {
    background-color: var(--dx-g-gray-90);
}

.container.container-mobile .header-title {
    color: var(--dx-g-gray-10);
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-sm);
}

.container.container-mobile.collapsed {
    height: unset;
    padding: 4px 0;
}

.container.container-mobile.collapsed .header {
    margin-bottom: 0;
}

.container.container-border-active {
    --border-color: var(--dx-c-sidebar-button-color);
}

.search {
    padding-bottom: var(--dx-g-spacing-md);
}

.search-box {
    --dx-c-input-width: 100%;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-nav {
    display: flex;
    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm)
        var(--dx-g-spacing-xs) var(--dx-g-global-header-padding-horizontal);
    position: fixed;
    bottom: 0;
    left: 0;
    width: inherit;
    background: white;
    border-top: 1px solid var(--dx-g-gray-90);
    border-right: 1px solid var(--dx-g-gray-90);
    height: var(--dx-g-spacing-2xl);
    align-items: center;
}

.sidebar-content-hasfooter {
    margin-bottom: var(--dx-g-spacing-2xl);
}

@media screen and (max-width: 767px) {
    :host {
        --doc-version-picker-width: calc(
            100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
        );
    }
}