$spc_social_widget-dark: #000;
$spc_social_widget-bright: #fff;

.spc_social_widget {

	.social-button {
		position: fixed;
    top: -50px;
    right: -50px;
    background-color: $spc_social_widget-bright;
    height: 80px;
    width: 120px;
    border-bottom: 1px solid $spc_social_widget-dark;
    z-index: 999;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all 0.2s;

		p {
			position: absolute;
	    top: 80%;
	    left: 62%;
	    text-transform: uppercase;
	    color: $spc_social_widget-dark;
	    font-size: 12px;
	    text-align: center;
	    font-weight: bold;
	    margin: 0;
	    -ms-transform: translateX(-50%) translateY(-50%);
	    transform: translateX(-50%) translateY(-50%);
		}

		&:hover {
			background-color: $spc_social_widget-dark;
		
			p {
				color: $spc_social_widget-bright;
			}
		}
	}

	.fade-in-out {
		right: 0 !important;
	}

	.icons-wrapper {
		position: fixed;
		width: 100vw;
		height: 100vh;	
		top: 0;
		right: -100vw;
		bottom: 0;
		background-color: $spc_social_widget-dark;
		z-index: 998;
		transition: all 0.3s;

		div {
			position: absolute;
	    top: 50%;
	    left: 50%;
			transform: translateX(-50%) translateY(-50%);

			p {
				font-size: 14px;
				color: $spc_social_widget-bright;
				text-align: center;
		    margin: 0 auto 5px;
		    padding: 10px;
			}

			svg {
				display: block;
				width: 28px;
		    height: 28px;
		    margin: 0 auto 5px;
		    padding: 10px;
			}
		}
	}

@media screen and (max-width: 800px) {
		.social-button {
			position: fixed;
	    top: -54px;
	    right: -54px;
	  }
	}
}