:root {
	
	--social-icon-size: 36px;
	--social-icon-padding-factor: 0.25;
	
	--social-icon-bg: var(--white);
	--social-icon-hover-bg: var(--primary-dark);
	--social-icon-fill: var(--primary);
	--social-icon-hover-fill: var(--white);
	
	--social-icon-dark-bg: var(--primary);
	--social-icon-dark-hover-bg: var(--primary-dark);
	--social-icon-dark-fill: var(--white);
	--social-icon-dark-hover-fill: var(--primary);

}

.social-icons-wrapper {
	display: flex;
	flex-direction: row;
	width: auto;
	gap: 8px;
}

.social-icon {
	svg {
		background-color: var(--social-icon-bg);
		transition: background-color 0.8s cubic-bezier(0.2, 1, 0.3, 1), fill 0.8s cubic-bezier(0.2, 1, 0.3, 1);
		
		width: var(--social-icon-size);
		height: var(--social-icon-size);

		&,
		* {
			fill: var(--social-icon-fill) !important;
		}

		&:hover {
			background-color: var(--social-icon-hover-bg);
			fill: var(--social-icon-hover-fill) !important;

			
			* {
				fill: var(--social-icon-hover-fill) !important;
				
			}
		}
	}

	&--dark {
		svg {
			--social-icon-bg: var(--social-icon-dark-bg);
			--social-icon-hover-bg: var(--social-icon-dark-hover-bg);
			--social-icon-fill: var(--social-icon-dark-fill);
			--social-icon-hover-fill: var(--social-icon-dark-hover-fill);
			
		}
	}
}

.icons--circle {
  
	
	svg {
		padding: calc(var(--social-icon-size) * var(--social-icon-padding-factor));
		clip-path: circle();
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible;
	}
}