/* PP Social Icons for Bricks — Default Styles */

/* Element Wrapper */
.pp-social-icons {
    max-width: 100%;
    width: max-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

/* Icon Wrapper */
.pp-social-icons .pp-social-icons__icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    transition-property: background-color, transform, opacity, fill;
    transition-duration: var(--pp-si-transition, 300ms);
    transition-timing-function: ease;
}

/* Shape variants */
.pp-social-icons--shape-circle .pp-social-icons__icon-wrapper {
    border-radius: 100%;
}

.pp-social-icons--shape-square .pp-social-icons__icon-wrapper {
    border-radius: 0;
}

/* Icon SVG */
.pp-social-icons .pp-social-icons__icon-wrapper svg {
    fill: #fff;
    width: 24px;
    height: 24px;
    display: block;
    transition-property: fill;
    transition-duration: var(--pp-si-transition, 300ms);
    transition-timing-function: ease;
}

/* Icon font (for custom icons) */
.pp-social-icons .pp-social-icons__icon-wrapper i {
    color: #fff;
    font-size: 24px;
    transition-property: color;
    transition-duration: var(--pp-si-transition, 300ms);
    transition-timing-function: ease;
}

/* Hover: scale */
.pp-social-icons .pp-social-icons__icon-wrapper:hover {
    transform: scale(var(--pp-si-scale, 1.1));
}

/* Default Social Network Brand Colors */
.pp-social-icons .pp-social-icons__icon-facebook {
    background-color: #4267B2;
}

.pp-social-icons .pp-social-icons__icon-instagram {
    background-color: #E1306C;
}

.pp-social-icons .pp-social-icons__icon-twitter {
    background-color: #000;
}

.pp-social-icons .pp-social-icons__icon-youtube {
    background-color: #FF0000;
}

.pp-social-icons .pp-social-icons__icon-dribbble {
    background-color: #Ea4c89;
}

.pp-social-icons .pp-social-icons__icon-behance {
    background-color: #053eff;
}

.pp-social-icons .pp-social-icons__icon-github {
    background-color: #24292e;
}

.pp-social-icons .pp-social-icons__icon-linkedin {
    background-color: #0077b5;
}

.pp-social-icons .pp-social-icons__icon-vimeo {
    background-color: #19B7EA;
}

.pp-social-icons .pp-social-icons__icon-tiktok {
    background-color: #000;
}

.pp-social-icons .pp-social-icons__icon-pinterest {
    background-color: #E60023;
}

.pp-social-icons .pp-social-icons__icon-custom {
    background-color: var(--bricks-color-primary, #3b82f6);
}