@import "~scss/_mixins";

.widget.widgetView { display: flex; flex-direction: column; };
.widget.widgetView {
	.loaderWrapper { position: relative; }
	.innerWrap { height: 100%; min-height: 36px; padding-bottom: 8px; display: flex; flex-direction: column; }
	.contentWrapper { flex-grow: 1; min-height: 8px; }
	.head { padding-bottom: 0px; }
	.body { flex-grow: 1; }

	#viewSelect { padding: 0px 16px; }
	#viewSelect:empty { display: none; }
	#viewSelect {
		.select { border: none; margin: -2px 0px 2px -8px; padding-left: 8px; padding-right: 16px; max-width: calc(100% + 8px); }
		.select {
			.item { @include text-small; line-height: 18px !important; font-weight: 500; }
			.icon.arrow { 
				width: 8px !important; height: 5px !important; margin-top: -2.5px !important; background-image: url('~img/arrow/widget.svg') !important; 
				background-size: contain; right: 4px !important;
			}
		}
	}

	.tabs { position: relative; font-weight: 500; color: var(--color-control-active); height: 22px; overflow: hidden; }
	.tabs {
		.tab { white-space: nowrap; flex-shrink: 0; transition: $transitionAllCommon;  }
		.tab.active, .tab:hover { color: var(--color-text-primary); }

		.swiper { overflow: visible; position: absolute; left: 0px; top: 0px; width: 100%; }
		.swiper-slide { width: auto; }
		.swiper-button-prev, .swiper-button-next { width: 44px; height: 28px; position: absolute; top: -3px; z-index: 1; }
		.swiper-button-prev, .swiper-button-next {
			&::before { 
				content: ''; width: 24px; height: 24px; display: block; position: absolute; left: 12px; top: 2px; z-index: 1;
				background-image: url('~img/arrow/widgetTab0.svg'); background-size: 20px; background-repeat: no-repeat;
				border-radius: 6px; background-position: center;
			}
			&::after { 
				content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0px; top: 0px; 
				background-image: linear-gradient(90deg, rgba(255,255,255,0) 0px, var(--color-bg-primary) 16px, var(--color-bg-primary) 100%);
			}
			&:hover::before { background-image: url('~img/arrow/widgetTab1.svg'); }
		}
		.swiper-button-prev { left: -16px; transform: rotateZ(180deg); }
		.swiper-button-next { right: -16px; }
		.swiper-button-disabled { display: none; }
	}
}

.widget.widgetView.isPreview { padding: 0px; height: 100%; }
.widget.widgetView.isPreview {
	#viewSelect { padding-top: 12px; }
	.head { padding-top: 12px; padding-bottom: 0px; }

	.body { height: 100%; }
	.body {
		.item.canDrag {
			.inner { padding-left: 0px !important; padding-right: 8px !important; width: calc(100% - 20px); }
		}
	}

	.innerWrap { padding: 0px; }
	.innterWrap.withViewSelect {
		.head { padding-top: 4px; }
	}
	.innerWrap:not(.viewBoard) {
		.body { padding: 0px !important; }
	}
	.innerWrap.viewBoard {
		.body { padding: 8px; }
	}
}

.widget.widgetView.isClosed {
	.contentWrapper { height: 8px; }
	.innerWrap { opacity: 0; }
}

.widget.widgetView.isPreview {
	.viewGallery {
		.body { padding: 0px !important; }
		.ReactVirtualized__List { padding: 4px 16px; }
	}
}

.widget.widgetView {
	@import "./board";
	@import "./calendar";
	@import "./gallery";
	@import "./list";
	@import "./graph";
}