﻿/* =========== © 2024 Centroarts.com - https://honista.com =========== */

/* Share */
@media (min-width: 992px) {
	.share-list { display: flex !important; }
	.viewline::before {
		content: ""; max-width: calc(var(--post-pad) - 24px); margin-right: 24px;
		background-image: linear-gradient(to right, var(--color-primary), var(--color-second));
		flex: 1 1 auto; height: 2px; border-radius: 1px; background-color: var(--color-primary);
	}
	:dir(rtl) .viewline::before { margin-left: 24px; margin-right: 0; }
}
@media (max-width: 991px) {
	html:not(.sl) .share-list, html.sl .share-func { display: flex !important; }
}
@media (max-width: 575px) {
	html:not(.sl) .viewline::after { display: none; }
}

.viewline { display: flex; align-items: center; height: 48px; }
.viewline::after {
	content: ""; flex: 1 1 auto; height: 2px; border-radius: 1px; background-color: var(--color-primary);
	background-image: linear-gradient(to left, var(--color-primary), var(--color-second));
	margin-left: 24px;
}
.share-list { margin-right: 24px; }

:dir(rtl) .viewline::after { margin-right: 24px; margin-left: 0; }
:dir(rtl) .share-list { margin-left: 24px; margin-right: 0; }

.share-item, .share-btn {
	display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 12px; width: 48px; height: 48px;
	position: relative; z-index: 1; border-radius: 50%; background: none; border: 0 none; transition: box-shadow .2s ease;
	color: inherit !important;
}
.share-item, .share-url-data:not(:last-child) { margin-right: 8px; }
:dir(rtl) .share-item, :dir(rtl) .share-url-data:not(:last-child) { margin-left: 8px; margin-right: 0; }

.share-url-data .share-item { margin-right: 0; }
:dir(rtl) .share-url-data .share-item { margin-left: 0; }

.share-item .ic { width: 24px; min-height: 24px; height: 24px; }

.share-item::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid; width: inherit; height: inherit; opacity: .1;
	transition: opacity .2s ease, transform .2s ease;
}
.share-item:hover::after { opacity: .3; transform: scale(1.04); }

.share-url-btn .ic { transition: transform .2s ease, opacity .2s ease; }
.share-url-btn .ic + .ic { margin-top: -24px; opacity: 0; transform: translateY(4px); }
.share-url-btn.success .ic:first-child { opacity: 0; transform: translateY(-4px); }
.share-url-btn.success .ic + .ic { opacity: 1; transform: translateY(0); }

.share-btn { margin-left: -12px; }