/* Media */
@mixin tambar-desktop {
	@media screen and ( min-width: 783px ) {
		@content;
	}
}
@mixin tambar-mobile {
	@media screen and ( max-width: 782px ) {
		@content;
	}
}

@mixin tambar-bottom {
	body.tambar-desktop-bottom & {
		@include tambar-desktop {
			@content;
		}
	}

	body.tambar-mobile-bottom & {
		@include tambar-mobile {
			@content;
		}
	}
}
@mixin tambar-right {
	body.tambar-switcher-desktop-right & {
		@include tambar-desktop {
			@content;
		}
	}

	body.tambar-switcher-mobile-right & {
		@include tambar-mobile {
			@content;
		}
	}
}

@mixin tambar-hidden-top {
	body.tambar-hidden.tambar-desktop-top & {
		@include tambar-desktop {
			@content;
		}
	}

	body.tambar-hidden.tambar-mobile-top & {
		@include tambar-mobile {
			@content;
		}
	}
}
@mixin tambar-hidden-bottom {
	body.tambar-hidden.tambar-desktop-bottom & {
		@include tambar-desktop {
			@content;
		}
	}

	body.tambar-hidden.tambar-mobile-bottom & {
		@include tambar-mobile {
			@content;
		}
	}
}


/* Variables */
:root {
	--tambar-admin-bar-size: var( --wp-admin--admin-bar--height );
	--tambar-switcher-size: var( --tambar-admin-bar-size );

	--tambar-animation: linear .05s;
}

/* HTML */
html {
	transition: margin var( --tambar-animation );
	
	/* Desktop */
	@include tambar-desktop {
		/* Bottom */
		&:has( body.tambar-desktop-bottom ) {
			margin-top: 0 !important;
			margin-bottom: var( --tambar-admin-bar-size ) !important;
		}
	}

	/* Mobile */
	@include tambar-mobile {
		/* Bottom */
		&:has( body.tambar-mobile-bottom ) {
			margin-top: 0 !important;
			margin-bottom: var( --tambar-admin-bar-size ) !important;
		}
	}

	/* Hidden */
	&:has( body.tambar-hidden ) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* Admin Bar */
#wpadminbar {
	--translate-k: 1;

	transition: translate var( --tambar-animation );

	position: fixed;

	/* Bottom */
	@include tambar-bottom {
		--translate-k: -1;

		top: unset;
		bottom: 0;

		.ab-sub-wrapper {
			box-shadow: 0 -3px 5px rgba( 0, 0, 0, .2 );
			
			top: unset;
			bottom: 100%;
		}
	}

	/* Hidden */
	body.tambar-hidden & {
		translate: 0 calc( 0px - var( --tambar-admin-bar-size ) * var( --translate-k ) );
	}
}

/* Switcher */
#tambar-switcher {
	background-color: #2c3338;
	width: var( --tambar-switcher-size );
	height: var( --tambar-switcher-size );
	transition: top var( --tambar-animation ),
				bottom var( --tambar-animation );

	cursor: pointer;

	position: fixed;
	top: var( --tambar-admin-bar-size );
	left: var( --tambar-switcher-size );
	z-index: 99999;

	/* Icon */
	&::after {
		--init-rotation: 0deg;

		content: '';

		background-image: url( ../images/arrow.svg );
		background-repeat: no-repeat;
		background-position: center;
		background-size: 40%;
		width: 100%;
		height: 100%;
		rotate: var( --init-rotation );

		position: absolute;

		/* Bottom */
		@include tambar-bottom {
			--init-rotation: 180deg;
		}

		/* Hidden */
		body.tambar-hidden & {
			rotate: calc( var( --init-rotation ) + 180deg );
		}
	}

	/* Bottom */
	@include tambar-bottom {
		top: unset;
		bottom: var( --tambar-admin-bar-size );
	}

	/* Right */
	@include tambar-right {
		left: unset;
		right: var( --tambar-switcher-size );
	}

	/* Hidden top */
	@include tambar-hidden-top {
		top: 0;
	}

	/* Hidden bottom */
	@include tambar-hidden-bottom {
		bottom: 0;
	}
}