@import "~scss/_mixins";

.menus {
	.menu.menuPublish { width: var(--menu-width-large); }
	.menu.menuPublish {
		.content { padding: 16px; display: flex; flex-direction: column; gap: 8px 0px; overflow: visible; max-height: unset; }

		.menuHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
		.title { padding: 0px; @include text-paragraph; font-weight: 600; margin: 0px; color: var(--color-text-primary); }
		.icon.info { width: 20px; height: 20px; background: url('~img/icon/info.svg'); }

		.input { padding: 7px 9px; height: auto; border-radius: 7px; border: 1px solid var(--color-shape-secondary); }
		.input.isReadonly { background: rgba(0, 0, 0, 0.03); }
		.input.isFocused { box-shadow: 0px 0px 0px 1px var(--color-system-accent-50); border-color: var(--color-system-accent-50); }

		.label.small { @include text-small; color: var(--color-text-secondary); @include text-overflow-nw; }

		.flex { padding: 3px 0px; align-items: center; gap: 0px 16px; justify-content: space-between; }
		.flex {
			.side.left {  display: flex; flex-direction: row; align-items: center; gap: 0px 4px; }
			.icon.joinSpace { width: 20px; height: 20px; background: url('~img/icon/plus/joinSpace.svg'); }
			.value { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-shrink: 0; }
		}

		.urlWrapper { display: flex; flex-direction: row; align-items: center; gap: 0px 8px; }
		.urlWrapper {
			.label { flex-grow: 1; cursor: default; position: relative; @include text-overflow-nw; }
			.label::after {
				content: ''; display: block; position: absolute; right: -22px; top: 0px; width: 46px; height: 100%; z-index: 1;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0) -22.83%, var(--color-bg-primary) 34.78%);
			}
			.button { 
				flex-shrink: 0; font-weight: 500; @include text-small; color: var(--color-text-primary); height: 18px; padding: 0px 4px; 
				border-radius: 4px; transition: $transitionAllCommon; display: none;
			}
		}
		.urlWrapper:hover {
			.button { display: block; }
		}

		.incentiveBanner { 
			display: flex; gap: 0px 12px; align-items: flex-start; padding: 16px; background: var(--color-system-selection); border-radius: 8px; margin-bottom: 4px; 
		}
		.incentiveBanner {
			b { font-weight: 600; }
			.label { line-height: 20px; }
			.button { flex-shrink: 0; @include text-small; }
		}

		.buttons { display: flex; flex-direction: row; align-items: center; gap: 0px 8px; justify-content: space-evenly; height: 36px; }
		.buttons {
			.button { flex-grow: 1; width: 100%; }
			.loaderWrapper { position: relative; height: 36px; }
			.label { color: var(--color-text-secondary); }
		}

		.error { margin: 0px; text-align: center; }

		.outer { 
			position: absolute; left: 0px; bottom: 0px; transform: translateY(calc(100% + 8px)); width: 100%; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); 
			border-radius: 8px; overflow: hidden; background: var(--color-bg-primary);
		}
		.outer {
			.item { 
				display: flex; flex-direction: row; align-items: center; padding: 18px 16px; @include text-paragraph; font-weight: 600; gap: 0px 12px; 
				border-bottom: 1px solid var(--color-shape-secondary);
			}
			.item:last-child { border-bottom: none; }
			.item::before {
				content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1; pointer-events: none;
			}
			.item:hover::before { background: var(--color-shape-highlight-medium); }

			.icon { flex-shrink: 0; }
			.icon.space { background-image: url('~img/icon/publish/member.svg'); }
			.icon.export { background-image: url('~img/icon/publish/export.svg'); }
			.icon.arrow { background-size: 6px 10px; background-image: url('~img/icon/popup/settings/forward.svg'); right: 12px; }

			.name { flex-grow: 1; }
		}
	}
}
