@import "~scss/_mixins";

$shadow: 0px 2px 20px rgba(0,0,0,0.2);
$hl-gradient: linear-gradient(180deg, #fef2c6 0%, #f8f8f8 100%);

.popups {
	.popup.popupUsecase {
		.content { height: 100%; }
		.innerWrap { width: 960px; height: 772px; max-height: calc(100% - 128px); }

		@media (max-width: 896px) {
			.innerWrap { width: calc(100% - 64px); left: 16px; margin-left: 0px !important; }
		}

		.emptySearch {
			color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-shape-secondary);
			border-top: 1px solid var(--color-shape-secondary); text-align: center; padding: 16px 0px; height: 300px; margin: 56px 0px 0px 0px;
		}
		.emptySearch {
			b { display: inline; }
			.inner { width: 300px; }
		}

		.banner { background: var(--color-bg-blue); padding: 16px; text-align: center; }
		.banner {
			a { text-decoration: underline; }
			a:hover { text-decoration: none; }
		}

		.page.pageList {
			.mid { padding: 56px 56px 0px 56px; text-align: center; }
			.mid {
				.title { margin: 0px 0px 2px 0px; }
				.label { margin: 0px 0px 16px 0px; }

				.filter { text-align: left; max-width: 302px; height: 36px; margin: 0px auto; border: 1px solid var(--color-shape-primary); border-radius: 6px; padding: 0px; }
				.filter {
					.line { display: none; }
					.inner { height: 100%; text-align: left; padding: 0px 10px; justify-content: center; }
				}
			}

			.categories { position: sticky; top: 0px; left: 0px; z-index: 10; }
			.categories {
				.swiper { padding: 18px 24px; background: var(--color-bg-tag-blue); }

				.swiper-button-prev, .swiper-button-next { 
					position: absolute; top: 0px; z-index: 1; width: 15%; height: 100%; pointer-events: none; opacity: 0;
					transition: $transitionAllCommon;
				}
				.swiper-button-prev, .swiper-button-next {
					&.swiper-button-disabled { display: none; }

					&::before {
						content: ''; display: block; width: 100%; height: 100%;
						background: linear-gradient(to right, rgba(0,0,0,0) 0%, var(--color-bg-tag-blue) 80%);
					}
					&::after {
						content: ''; display: block; position: absolute; top: 50%; width: 32px; height: 32px; right: 16px; background-color: var(--color-bg-primary); 
						border-radius: 50%; z-index: 2; margin-top: -16px; background-image: url('~img/arrow/usecaseCategory0.svg');  pointer-events: all; 
						background-size: 20px; background-position: center; background-repeat: no-repeat; transition: $transitionAllCommon;
					}
					&:hover::after { background-color: var(--color-control-accent); background-image: url('~img/arrow/usecaseCategory1.svg'); }
				}
				.swiper-button-prev { left: 0px; transform: rotateY(-180deg); }
				.swiper-button-next { right: 0px; }

				.swiper-slide { width: auto; }

				&:hover {
					.swiper-button-prev, .swiper-button-next { opacity: 1; }
				}

				.item { 
					white-space: nowrap; padding: 2px 12px; @include text-common; border: 1px solid var(--color-control-accent); border-radius: 14px; 
					background: var(--color-bg-blue); transition: $transitionAllCommon; display: inline-flex; flex-direction: row; align-items: center; gap: 0px 8px;
					margin: 0px 8px 0px 0px; vertical-align: top;;
				}
				.item.hl { background-image: $hl-gradient; }
				.item:hover, .item.active { background: var(--color-control-accent); color: var(--color-text-inversion); }
				.item:hover, .item.active {
					.icon.heart { background-image: url('~img/icon/popup/usecase/heart1.svg'); }
					.icon.any { background-image: url('~img/icon/popup/usecase/any1.svg'); }
				}
				.item:last-child { margin: 0px; }

				.div { width: 1px; height: 28px; background: var(--color-control-active); display: inline-block; vertical-align: top; }

				.item {
					.icon { width: 16px; height: 16px; background-size: contain; }
					.icon.heart { background-image: url('~img/icon/popup/usecase/heart0.svg'); }
					.icon.any { background-image: url('~img/icon/popup/usecase/any0.svg'); }
				}
			}

			.items { padding: 0px 56px; }
			.items {
				.ReactVirtualized__List { padding: 56px 0px; overflow: visible !important; }
				.ReactVirtualized__Grid__innerScrollContainer { overflow: visible !important; }

				.row { display: grid; gap: 14px; padding-bottom: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
				.row:last-child { padding-bottom: 0px }

				.item { 
					border: 1px solid var(--color-shape-secondary); overflow: hidden; margin: 0px; border-radius: 12px; padding: 0px;
					box-sizing: border-box; display: flex; flex-direction: column; height: 364px;
				}
				.item {
					.info { padding: 16px; }

					.name { @include text-header3; @include text-overflow-nw; font-weight: 500; }
					.author { @include text-small; @include text-overflow-nw; color: var(--color-text-secondary); }

					.pictureWrapper { 
						background-color: var(--color-shape-tertiary); display: grid; place-items: center; flex-grow: 1; padding: 16px;
					}
					.picture { 
						width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; 
						border-radius: 6px;
					}
				}
			}
		}

		.page.pageItem { padding: 0px 56px 32px 56px; }
		.page.pageItem {
			.head { 
				width: 100%; margin: 0px 0px 20px 0px; padding: 22px 0px 0px 0px; background: var(--color-bg-primary); position: sticky; 
				left: 0px; top: 0px; z-index: 1; 
			}
			.head {
				.inner { display: flex; flex-direction: row; align-items: center; background: var(--color-bg-primary); }
				.icon.back { width: 8px; height: 8px; background-image: url('~img/icon/popup/settings/back.svg'); }
				
				.element { 
					color: var(--color-text-secondary); display: inline-flex; gap: 0px 6px; align-items: center; padding: 2px 8px 2px 6px;
					border-radius: 6px; margin-left: -6px;
				}
				.element:hover { background: var(--color-shape-highlight-medium); }
			}

			.titleWrap { 
				margin: 0px 0px 22px 0px; display: flex; flex-direction: row; align-items: center; justify-content: stretch; gap: 0px 16px;
			}
			.titleWrap {
				.side.left { flex-grow: 1; display: flex; flex-direction: column; gap: 8px 0px; }
				.side.right { flex-shrink: 0; }

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

			.screenWrap { 
				height: 480px; background: var(--color-shape-highlight-light); margin: 0px -56px 20px -56px; padding: 20px 56px; overflow: hidden;
				position: relative;
			}
			.screenWrap {
				.swiper { height: 100%; overflow: visible; }
				.swiper-slide { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; box-shadow: $shadow; }
				.screen { width: 100%; height: 100%; object-fit: cover; }

				.icon.arrow { 
					position: absolute; width: 44px; height: 44px; top: 50%; margin-top: -22px; background-color: var(--color-bg-primary); z-index: 1; 
					border-radius: 50%; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); background-image: url('~img/arrow/usecase.svg'); background-size: 20px;
					transition: $transitionAllCommon; border: 1px solid var(--color-shape-primary);
				}
				.icon.arrow.hide { opacity: 0; }
				.icon.arrow.left { left: 16px; transform: rotateZ(180deg); }
				.icon.arrow.right { right: 16px; }
			}

			.footerWrap { display: flex; flex-direction: row; align-items: flex-start; justify-content: stretch; }
			.footerWrap {
				.side { max-height: 240px; overflow: auto; }

				.side.left { flex-grow: 1; padding-right: 16px; }
				.side.right { flex-shrink: 0; width: 220px; padding-left: 16px; }
				.side.right {
					.tags {
						.tagItem { @include text-small; margin: 0px 8px 8px 0px; background: var(--color-shape-highlight-medium); color: var(--color-text-secondary); }
					}
					.label { @include text-small; color: var(--color-text-secondary); margin: 0px 0px 8px 0px; }
					.label:last-child { margin: 0px; }
				}
			}
		}

	}

}