/* #Social icons
================================================== */

	.soc-ico a:before {
		.content & {
			background-color: fade(@base-color, 15%);
		}
		.dt-mega-menu .dt-mega-parent .sidebar-content & {
			background-color: fade(@mega-menu-widget-color, 15%);
		}
		.sidebar &,
		.sidebar-content & {
			background-color: fade(@widget-sidebar-color, 15%);
		}
		.footer & {
			background-color: fade(@widget-footer-color, 15%);
		}
	}
	.dt-shortcode-soc-icons a.dt-icon-bg-on:before,
	//.dt-team-shortcode.dt-icon-bg-on .soc-ico a:before,
	.dt-shortcode-icon.dt-icon-bg-on .icon-inner:before,
	.text-icon.dt-icon-bg-on .icon-inner:before {
		border-color: var(--the7-accent-color);
		background-color: var(--the7-accent-color);
		.accent-gradient & {
			.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
	}
	.dt-team-shortcode.dt-icon-bg-on .soc-ico a:before {
		.dt-icon-bg-on& { 
			.content & {
				background-color: var(--the7-accent-color);
			}
			.accent-gradient .content & {
				.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
			}
		}
		.dt-icon-border-on& {
			.content & {
				border-color: var(--the7-accent-color);
			}
		}
	}
	.dt-shortcode-soc-icons a,
	.dt-shortcode-icon,
	.text-icon {
		&.dt-icon-border-on:before,
        &.dt-icon-hover-border-on:after {
			border-color: var(--the7-accent-color);
		}
	}
			
	.soc-ico a {
		#main &,
		#footer & {
			&:hover {
				background-color: transparent;
				.box-shadow (none);
			}
			&:after {
				background-color: var(--the7-accent-color);
				.box-shadow (none);
			}
		}
		#footer & {
			&:after {
				.custom-mixin-footer-accent-bg (@widget-footer-accent-color, @color-opacity:100%);
			}
		}
		
		.accent-gradient #main &,
		.accent-gradient #footer & {
			&:hover {
				background: none;
			}
			&:after {
				.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
			}

		}
		.accent-gradient #footer & {
			&:after {
				.custom-mixin-footer-accent-bg (@widget-footer-accent-color, @color-opacity:100%);
			}
		}
	}
	.dt-shortcode-soc-icons a.dt-icon-hover-bg-on,
	//.content .dt-team-shortcode.dt-icon-hover-bg-on .soc-ico a,
	.dt-shortcode-icon.dt-icon-hover-bg-on .icon-inner,
	.text-icon.dt-icon-hover-bg-on .icon-inner {
		&:after {
			border-color: var(--the7-accent-color);
			background-color: var(--the7-accent-color);
			.accent-gradient & {
				.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
			}
		}
	}
	.dt-team-shortcode.dt-icon-bg-on .soc-ico a:after {
		.dt-icon-hover-bg-on& { 
			.content & {
				background-color: var(--the7-accent-color);
			}
			.accent-gradient .content & {
				.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
			}
		}
		.dt-icon-border-hover-on& {
			.content & {
				border-color: var(--the7-accent-color);
			}
		}
	}
	.dt-shortcode-soc-icons a .soc-font-icon,
	#main .dt-team-shortcode .soc-ico a .soc-font-icon,
	.dt-shortcode-icon .soc-icon,
	.text-icon .soc-icon {
		color: var(--the7-accent-color);
		.accent-gradient & {
			.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-text-color-2);
		}
	}

	.soc-ico a:not(:hover) .soc-font-icon {
		.content & {
			color: var(--the7-base-color);
		}
		.sidebar &,
		.sidebar-content & {
			color: @widget-sidebar-color;
		}
		.footer & {
			color: @widget-footer-color;
		}
	}
