@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../base/mixins";


// Base
.post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.post-share-title,
.post-share-icon {
	margin: 5px 11px;
	vertical-align: middle;
}

.post-share-title {
	font-size: $font-size-base * .71;
}

.post-share-icon {
	font-size: $font-size-lg;
	color: $gray-900;

	&:hover,
	&:focus {
		color: $secondary;
	}
}


// Spacing
.post-share { margin-top: 20px }


// Media
@include media-breakpoint-up( xxl ) {
	html:not([data-x-mode]) {
		.post-share {
			position: fixed;
			top: 26vh;
			left: 30px;
			z-index: 1;
			flex-direction: column;
			margin-top: 0;
			padding: 0 0 8px;
			background-color: $white;
			border-radius: $border-radius-lg;
			box-shadow: $box-shadow-sm;
		}

		.post-share-1 {
			left: auto;
			right: 30px;
		}

		.post-share-2 {
			top: 31vh;
			left: auto;
			right: calc( 50% - #{ map_get( $container-max-widths, xxl ) }/2 + #{$grid-gutter-width}/2 );
		}

		.post-share-title,
		.post-share-icon {
			margin: 13px 11px;
		}
	}
}