/**
* @package		JJ Social Slider
* @author		JoomJunk
* @copyright	Copyright (C) 2011 - 2021 JoomJunk. All Rights Reserved
* @license		http://www.gnu.org/licenses/gpl-3.0.html
*/

.jj-social-slider {
    --ss-svg-size: 1.5rem;
    --ss-padding: 10px;
    --ss-translate-left: translateX(calc(-1 * (100% - var(--ss-svg-size) - (var(--ss-padding) * 2))));
    --ss-translate-right: translateX(calc(100% - var(--ss-svg-size) - (var(--ss-padding) * 2)));

    position: fixed;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 9999;
}
.jj-social-slider,
.jj-social-slider > * {
    box-sizing: border-box;
}
.jj-social-slider.left {
	left: 0;
	transform: var(--ss-translate-left);
}
.jj-social-slider.right {
	right: 0;
	transform: var(--ss-translate-right);
}
.jj-social-slider.middle {
    top: 0;
	display: flex;
	height: 100vh;
	flex-direction: column;
	justify-content: center;
}


.jj-social-slider a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ss-padding);
    margin-bottom: .2rem;
	text-decoration: none;
    transition: all var(--ss-transaction-speed) var(--ss-transaction-ease);
	flex-direction: var(--ss-flex-direction);
	opacity: var(--ss-opacity);
}

.jj-social-slider a:hover,
.jj-social-slider a:focus {
	outline: 0;
	border: 0;
	transform: var(--ss-translate-right);
	transition: all var(--ss-transaction-speed) var(--ss-transaction-ease);
	opacity: 1;
}
.jj-social-slider.right a:hover,
.jj-social-slider.right a:focus {
	transform: var(--ss-translate-left);
}


.jj-social-slider svg {
    width: var(--ss-svg-size);
    max-height: var(--ss-svg-size);
}