/**
 * ページパーツで読み込むとSmoooothの設定画面で動作しなくなってしまうスタイルをまとめたCSS
 * フッターなどで読み込みます
 */

/**
 * header
 */
.header-nav__content {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-80px);

	&.active {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0px);
	}
}

/**
 * Dialog
 */
.dialog {
	& .dialog__content-wrapper {
		position: fixed;
		opacity: 0;
		pointer-events: none;
		transition: opacity 150ms ease;
	}

	& .dialog__content {
		position: fixed;
		top: 10vh;
		left: 50%;
		transform: translateX(-50%);
		max-width: 800px;
		max-height: 80vh;
		overflow-y: auto;
		z-index: 101;

		& img {
			display: none !important;
		}
	}

	& .dialog__layer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0 0 0 / 50%);
		z-index: 100;
	}

	&.open {
		& .dialog__content-wrapper {
			opacity: 1;
			pointer-events: auto;
		}

		& .dialog__content {
			& img {
				display: block !important;
			}
		}
	}
}

@keyframes pulse {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.loading-spinner {
	position: fixed;
	background: var(--ink);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition-property: opacity, visibility;
	transition-duration: 450ms;
	transition-timing-function: ease;

	& img {
		animation: pulse 3s ease-in-out infinite;
		width: 320px;
		max-width: 80vw;
	}

	& .spinner {
		animation: spin 3s linear infinite;
		width: 4rem;
		height: 4rem;
		border-radius: 9999px;
		border: 1px solid rgba(0 0 0 / 20%);
		border-top-color: var(--ink);
	}

	&.loaded {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}