> #containerSettings {
    height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; flex-shrink: 0;
    background-color: var(--color-shape-tertiary);
}
> #containerSettings {
    > .head {
        display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px;
        gap: 0px 8px; overflow: hidden;
    }

    > .body { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 52px); padding: 0px 12px 12px 12px; position: relative; flex-grow: 1; overscroll-behavior: none; }
    > .body {
        .list { display: flex; flex-direction: column; justify-content: space-between;  height: 100%; border-radius: 12px; background: var(--color-bg-primary); padding: 8px 0px; }
        .list {
            > .head { display: flex; gap: 0px 8px; align-items: center; border-bottom: 1px solid var(--color-shape-secondary); @include text-paragraph; font-weight: 600; padding: 4px 16px 12px 8px; }
            > .head {
                .icon.back { background-image: url('~img/icon/widget/back.svg'); flex-shrink: 0; }
				.name { @include text-overflow-nw; }
            }

			.ReactVirtualized__List { padding: 0px 8px; }

            .inner { height: 100%; }
            .row {
                > .section { padding-top: 16px; }
                > .section.isFirst { padding-top: 12px; }
            }

            .section {
                > .name { @include text-small; color: var(--color-text-secondary); margin: 0px; padding: 0px 8px; }
            }
            .section.isLabel {
                > .name { margin-bottom: -4px; }
            }

            .section.isToggle {
                .items { display: none; padding-left: 18px; }
            }
            .section.isToggle.isOpen {
                .toggle {
                    .icon { transform: rotate(0deg); }
                }
                .items { display: flex; }
            }

            .items { display: flex; flex-direction: column; }

            .toggle,
            .item {
                display: flex; position: relative; align-items: center; flex-direction: row; gap: 0px 6px; padding: 3px 8px; border-radius: 8px;
                transition: background-color $transitionCommon;
            }
            .toggle:hover,
            .item:hover, .item.active { background-color: var(--color-shape-highlight-medium); }
            .item {
				.icon, .iconObject { flex-shrink: 0; }
                .icon { width: 20px; height: 20px; }
                .icon.logout { width: 22px; height: 22px; background-image: url('~img/icon/popup/settings/logout.svg'); }

                .name { @include text-overflow-nw; flex-grow: 1; }

                .caption { color: var(--color-text-secondary); text-align: right; @include text-overflow-nw; }
                .caption.join { font-weight: 500; padding: 2px 8px; border-radius: 4px; @include text-small; background: var(--color-control-accent); color: var(--color-bg-primary); }
            }

            .item.isTypeOrRelation { padding-left: 26px; }

            .item.itemAccount { padding: 8px; gap: 0px 14px; align-items: center; border-radius: 8px; }
            .item.itemAccount {
                .iconObject { flex-shrink: 0; }
                .name { @include text-common; @include text-overflow-nw; font-weight: 600; }
            }

            .toggle { padding-left: 4px; }
            .toggle {
                .icon { width: 20px; height: 20px; flex-shrink: 0; background-image: url('~img/arrow/select/dark.svg'); transform: rotate(-90deg); }
            }
            .toggle.isOpen {
                .icon { transform: rotate(0deg); }
            }
        }

        .logout { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 0px 8px; border-radius: 8px; padding: 4px 0px; margin: 0px 8px; }
        .logout {
            .icon { width: 20px; height: 20px; background-size: 20px; background-image: url('~img/icon/popup/settings/logout.svg'); }
        }
		.logout:hover { background-color: var(--color-shape-highlight-medium); }
    }
}

> #containerSettings.spaceSettings {
    > .body {
        > .list { padding-bottom: 0px; }
        > .list {
            .inner { height: calc(100% - 45px); }
            .ReactVirtualized__List { padding-bottom: 8px; }
        }
    }
}
