:host {
    display: flex;
    flex: 1;
    overflow: hidden;
    flex-direction: row-reverse;

    .sidebar {
        position: relative;
        width: 250px;
        flex-shrink: 0;
        overflow: visible;
        border-right: 1px solid var(--line-sidebar);

        .hider {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        dui-splitter {
            right: -4px;
        }

        &.with-animation {
            transition: width 0.3s ease-in-out;
        }

        &.hidden {
            width: 0 !important;
        }
    }

    .sidebar-container {
        width: 100%;
        height: 100%;
        max-height: 100%;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content {
        flex: 1;
        position: relative;
        padding: 14px;
        overflow: auto;
        max-height: 100%;
    }

    &:not(.transparent) .content {
        background-color: var(--dui-window-content-bg);
    }
}

:host.no-vibrancy {
    .sidebar {
        border-right: 1px solid #c7ced3;
        background-color: #dfe6eb;
    }
}

:host-context(.dark) {
    &.no-vibrancy {
        .sidebar {
            background-color: #2a3136;
        }
    }
}