@import "~scss/_mixins";

.widget.widgetSpace { padding: 8px; }
.widget.widgetSpace {
	.icon.remove { display: none !important; }

	.body {
		.sides { display: flex; flex-direction: row; align-items: center; gap: 0px 12px; justify-content: stretch; padding: 4px 8px; }
		.sides {
			.side.left { display: flex; flex-direction: row; align-items: center; gap: 0px 6px; width: 100%; flex-grow: 1; overflow: hidden; }
			.side.left {
				.iconObject { flex-shrink: 0; }
				.iconObject:not(.withOption) { background-color: var(--color-shape-tertiary); }

				.txt { flex-grow: 1; width: calc(100% - 52px) }
				.name { @include text-paragraph; @include text-overflow-nw; font-weight: 600; }
			}

			.side.right { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0px 4px; }
			.side.right {
				.icon { width: 28px !important; height: 28px !important; flex-shrink: 0; }
				.icon.search { background-image: url('~img/icon/widget/button/search.svg'); }

				.plusWrapper { box-shadow: 0px 0px 0px 1px var(--color-shape-secondary) inset; border-radius: 6px; }
				.plusWrapper {
					.icon:first-child { border-radius: 6px 0px 0px 6px; }
					.icon:last-child { border-radius: 0px 6px 6px 0px; }
				}

				.icon.plus { background-image: url('~img/icon/widget/button/plus.svg'); border-right: 1px solid var(--color-shape-secondary); }
				.icon.arrow { width: 23px !important; background-image: url('~img/icon/widget/button/arrow.svg'); }
			}
		}

		.buttons {
			.item { 
				padding: 3px 8px; display: flex; align-items: center; justify-content: space-between; position: relative; background: var(--color-bg-primary); 
				border-radius: 6px;
			}
			.item::before {
				content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: var(--color-shape-highlight-medium); z-index: 1; pointer-events: none;
				border-radius: inherit; opacity: 0;
			}
			.item:hover::before, .item.hover::before { opacity: 1; }

			.item {
				.side { display: flex; flex-direction: row; align-items: center; }
				.side.left { gap: 0px 6px; }
				.side.right {
					.cnt { 
						@include text-very-small; background-color: var(--color-control-active); color: var(--color-control-bg); border-radius: 50%; min-width: 18px; 
						text-align: center; font-weight: 500; height: 18px; line-height: 18px; display: none; padding: 0px 2px; flex-shrink: 0;
					}
				}

				.name { display: flex; gap: 0px 8px; @include text-overflow-nw; }

				.icon { width: 20px; height: 20px; flex-shrink: 0; }
				.icon.member { background-image: url('~img/icon/widget/button/member.svg'); }
				.icon.all { background-image: url('~img/icon/widget/button/all.svg'); }
				.icon.chat { background-image: url('~img/icon/widget/button/chat.svg'); }
			}
			.item:hover {
				.side.right {
					.icon.more { opacity: 1; }
				}
			}
		}
	}

	.body.withCnt {
		.buttons {
			.side.left { width: calc(100% - 30px); }
			.side.right {
				.cnt { display: block; }
			}
		}
	}
}
