/* -------------------------------------------
	360 Degree
---------------------------------------------- */

// Default
@if use_component(360_degree) {
	.riode-360-gallery-wrapper {
		padding: 2rem;
		display: flex;
		margin-left: auto;
		margin-right: auto;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;

		.nav_bar + .post-div {
			display: none;
		}

		.post-div img {
			margin-bottom: 2rem;
		}
	}

	.riode-360-gallery-wrap {
		position: relative;
		margin-bottom: 2rem;
		margin-top: 0;
		cursor: ew-resize;

		&::after {
			content: "";
			border-color: rgba(170,170,170,0.05) rgba(170,170,170,0.1) rgba(170,170,170,0.15);
			border-radius: 50%;
			border-style: solid;
			border-width: 2px 2px 3px;
			bottom: 5%;
			height: 50%;
			left: 70px;
			position: absolute;
			right: 70px;
			z-index: 10;
			transition-delay: 0.5s;
		}

		img {
			position: absolute;
			left: 0;
			top: 0;
		}

		.previous-image {
			visibility: hidden;
		}
		.current-image {
			position: static;
			visibility: visible;
		}

		.not_loaded > & img {
			opacity: 0;
			position: absolute;
			left: 0;
		}
	}

	.riode-360-gallery-wrapper .nav_bar {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1rem;

		a {
			position: relative;
			display: block;
			margin: 0 5px;
			width: 1em;
			height: 1em;
			line-height: 1em;
			font-size: 16px;
			text-indent: -9999px;
			text-align: center;
			transition: color .3s, background .3s, border .3s;

			&::before {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				text-indent: 0;
				font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
				font-weight: 900;
			}

			&:hover {
				color: #fff;
				background: #222;
				border-color: #222;
			}
		}

		.nav_bar_play, .nav_bar_stop {
			font-size: 24px;
		}

		.nav_bar_play::before {
			content: "\f04b";
			padding-left: 4px;
		}
		.nav_bar_stop::before {
			content: "\f04c";
		}

		.nav_bar_previous::before {
			content: "\f048";
		}
		.nav_bar_next::before {
			content: "\f051";
		}
	}

	.riode-360-gallery-wrapper.nav-bar-framed .nav_bar a,
	.riode-360-gallery-wrapper.nav-bar-stacked .nav_bar a {
		width: 2.5em;
		height: 2.5em;
		line-height: 2.5em;
		border-radius: 50%;
	}

	.riode-360-gallery-wrapper.nav-bar-stacked .nav_bar a {
		background: #222;
		color: #fff;

		&:hover {
			background: var(--rio-primary-color, #27c);
		}
	}

	.riode-360-gallery-wrapper.nav-bar-framed .nav_bar a {
		border: 1px solid #e1e1e1;
	}
}