/*  -----------------------------------------------------------------------------------------------
    Post Mixins
    @package v.1.0.0
--------------------------------------------------------------------------------------------------- */

$left_and_right_mobile: 24px;

@mixin entry-meta($cat_bg_color: $accent_color, $cat_color: $white, $meta_color: $black)
{
	.category-links
	{
		@extend .flex-item;
		margin-bottom: 12px;
		position: absolute;
		right: 0;
		left: auto;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		opacity: 0;
		visibility: hidden;
		transition: all .25s;
		z-index: -1;
		
		@include media('<=tablet')
		{
			position: initial;
			left: auto;
			right: auto;
			opacity: 1;
			visibility: visible;
			text-orientation: upright;
			writing-mode: horizontal-tb;
			display: flex;
			align-items: center;
			padding-left: 24px;
			max-width: 100%;
			width: 100%;
			-webkit-justify-content: flex-start;
			        justify-content: flex-start;
		}
		
		a
		{
			background: $cat_bg_color;
			font-size: 12px;
			padding: 5px;
			letter-spacing: 1px;
			color: $cat_color;
			text-transform: uppercase;
			display: block;
			margin-right: 1.5px;
			font-weight: bold;
		}
	}

	.entry-meta 
	{
		font-size: 12px;
		font-weight: 400;
		color: $meta_color;
	   	@extend .flex-item;
	   	flex-wrap: wrap;
	   	
	   	svg
	   	{
	   		width: 12px;
	   		height: 12px;
	   		margin-right: 5px;
	   	}

		.meta-information
		{
			@extend .flex-item;
			flex-wrap: wrap;
		
			span
			{
				@extend .flex-item;
				margin-right: 6px;
				text-transform: capitalize;
				
				a
				{
					color: $meta_color;
				}

			}
		}

		.entry-reading-time
		{
			display: flex;
			align-items: center;
		}
	}
}

@mixin entry-meta_for_single()
{
	.entry-meta 
	{
		font-size: 12px;
		font-weight: 400;
		color: $black;
	   	@extend .flex-item;
	   	flex-wrap: wrap;
	   	
	   	svg
	   	{
	   		width: 12px;
	   		height: 12px;
	   		margin-right: 3px;
	   	}

	   	.category-links
	   	{
	   		@extend .flex-item;
	   		margin-bottom: 12px;
	   		
	   		a
	   		{
	   			background: $accent_color;
	   			font-size: 12px;
	   			padding: 5px;
	   			letter-spacing: 1px;
	   			color: $white;
	   			text-transform: uppercase;
	   			display: block;
	   			margin-right: 1.5px;
	   			font-weight: bold;
	   			transition: background .25s;
	   			
	   			&:hover,
	   			&:focus
	   			{
	   				background: $black;
	   			}
	   		}
	   	}
	}
}


@mixin gallery_navigation
{
	.entry-gallery-navigation
	{
	    position: absolute; 
	    bottom: 0;
	    display: flex;  
	    width: 100%;

	    button
	    {
	        background: $black;
	        padding: 8px 4px;
	        transition: background, color .25s;
	        
	        &:hover,
	        &:focus
	        {
        		svg
        		{
        			fill: darken($white, 30%);
        		}
	        }
	        
	        svg
	        {
	            width:  24px;
	            height:  24px;
	            fill: $white;
	            @extend .flex-item;
	        }

	        &#gallery_next_button
	        {
	            svg
	            {
	                transform: rotateY(180deg);
	            }
	        }
	    }
	}
}