/* =========================
   BASE COMPONENT
   ========================= */

.button_back {
	width: 10vmin;
	height: 10vmin;

	background-color: var(--color_logo_bottom);

	border-radius: 50%;
	border: none;
	outline: none;

	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 100;

	display: flex;
	justify-content: center;
	align-items: center;

	will-change: transform;
	transition: background-color 0.3s, transform 0.3s;

	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	cursor: pointer;
}

.button_back:active {
	transform: scale(0.9);
}

/* =========================
   ICON
   ========================= */

.arrow_back {
	width: 50%;
	height: 50%;
	background-color: var(--color_logo_top);

	clip-path: polygon(40% 0%,
			40% 20%,
			100% 20%,
			100% 80%,
			40% 80%,
			40% 100%,
			0% 50%);

	transition: transform 0.3s, background-color 0.3s;
}

.arrow_back.rotated {
	transform: rotate(90deg);
}

/* =========================
   RESPONSIVE (MOBILE SIZE)
   ========================= */

@media (max-width: 480px) and (pointer: coarse) {
	.button_back {
		width: 15vmin;
		height: 15vmin;
	}
}

/* =========================
   DESKTOP HOVER (MOUSE)
   ========================= */

@media (hover: hover) {
	.button_back:hover {
		background-color: var(--color_logo_top);
	}

	.button_back:hover .arrow_back {
		background-color: var(--color_logo_bottom);
	}

	.button_back:focus-visible {
		outline: 2px solid var(--color_logo_top);
	}
}

/* =========================
   MOBILE TOUCH (ACTIVE STATE)
   ========================= */

@media (hover: none) and (pointer: coarse) {
	.button_back:active {
		background-color: var(--color_logo_top);
	}

	.button_back:active .arrow_back {
		background-color: var(--color_logo_bottom);
	}
}