@import "~scss/_mixins";

.footer { position: fixed; bottom: 0px; right: 0px; width: 100%; z-index: 20; }
.footer {
	.copy { 
		width: 120px; position: absolute; left: 50%; bottom: 12px; z-index: 10; text-align: center; margin-left: -60px; color: var(--color-bg-primary); 
		opacity: 0.6;
	}
	.label.disclaimer {
		@include text-small; position: absolute; left: 50%; bottom: 14px; white-space: nowrap; text-align: center; transform: translateX(-50%);
	}
	.label.disclaimer {
		a { text-decoration: none; color: unset; }
	}

	.buttons { z-index: 10; position: absolute; bottom: 14px; right: 14px; display: flex; flex-direction: row; gap: 0px 8px; align-items: center; }

	.iconWrap { width: 36px; height: 36px; position: relative; }
	.iconWrap {
		.bg { 
			background-color: var(--color-bg-primary); border: 1px solid var(--color-shape-secondary); border-radius: 50%; width: 100%; height: 100%;
			position: absolute; left: 0px; top: 0px; transition: transform 0.3s $easeInQuint;
		}
		.icon { width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; margin: -10px 0px 0px -10px; z-index: 1; }
	}
	.iconWrap:hover .bg { transform: scale(0.95); }
	
	#button-help {
		.icon { background-image: url('~img/icon/footer/help.svg'); }
	}

	#button-progress {
		.inner {
			position: absolute; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); background-color: var(--color-bg-primary);
			z-index: 1; border-radius: 50%; @include text-small; font-weight: 500; color: var(--color-text-secondary); display: flex; text-align: center;
			align-items: center; justify-content: center;
		}
	}
}

.footer.mainGraph { display: block !important; position: absolute; }