/*
CSS for Social Media Icons
*/


#social-media {
	display: inline-flex;
    align-items: center;
    justify-content: center;
	gap: 10px;
    padding-bottom: var(--wp--preset--spacing--50);
}

.icon-wrapper i {
	align-content: center;
    text-align: center;
    border-radius: 5px;
    height: 40px;
	width: 40px;
    color: var(--wp--preset--color--white);
}


/* Facebook */
.icon-wrapper i.fa-facebook-f {
    background-color: var(--wp--preset--color--secondary);
    font-size: 29px;
}

.icon-wrapper i.fa-facebook-f.bg-brand {
    background-color: #3b5998;
}


/* Instagram */
.icon-wrapper i.fa-instagram {
    background-color: var(--wp--preset--color--secondary);
    font-size: 33px;
}

.icon-wrapper i.fa-instagram.bg-brand {
	background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
}


/* Twitter */
.icon-wrapper i.fa-x-twitter {
	background-color: var(--wp--preset--color--secondary);
	font-size: 27px;
}

.icon-wrapper i.fa-x-twitter.bg-brand {
	background-color: black;
}


/* BlueSky */
.icon-wrapper i.fa-bluesky {
	background-color: var(--wp--preset--color--secondary);
    font-size: 27px;
}

.icon-wrapper i.fa-bluesky.bg-brand {
	background-color: #1083FE;
}


/* Background Color Options */
.icon-wrapper i.fa-facebook-f.bg-primary, 
.icon-wrapper i.fa-instagram.bg-primary, 
.icon-wrapper i.fa-x-twitter.bg-primary, 
.icon-wrapper i.fa-bluesky.bg-primary {background-color: var(--wp--preset--color--primary);}
.icon-wrapper i.fa-facebook-f.bg-secondary, 
.icon-wrapper i.fa-instagram.bg-secondary, 
.icon-wrapper i.fa-x-twitter.bg-secondary, 
.icon-wrapper i.fa-bluesky.bg-secondary {background-color: var(--wp--preset--color--secondary);}
.icon-wrapper i.fa-facebook-f.bg-tertiary, 
.icon-wrapper i.fa-instagram.bg-tertiary, 
.icon-wrapper i.fa-x-twitter.bg-tertiary, 
.icon-wrapper i.fa-bluesky.bg-tertiary {background-color: var(--wp--preset--color--tertiary);}
.icon-wrapper i.fa-facebook-f.bg-black, 
.icon-wrapper i.fa-instagram.bg-black, 
.icon-wrapper i.fa-x-twitter.bg-black, 
.icon-wrapper i.fa-bluesky.bg-black {background-color: var(--wp--preset--color--black);}
.icon-wrapper i.fa-facebook-f.bg-white, 
.icon-wrapper i.fa-instagram.bg-white, 
.icon-wrapper i.fa-x-twitter.bg-white, 
.icon-wrapper i.fa-bluesky.bg-white {background-color: var(--wp--preset--color--white);}

/* Text Color Options */
.icon-wrapper i.fa-facebook-f.text-black, 
.icon-wrapper i.fa-instagram.text-black, 
.icon-wrapper i.fa-x-twitter.text-black, 
.icon-wrapper i.fa-bluesky.text-black {color: var(--wp--preset--color--black);}