@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-social-icons {
    @include d-inline-flex();
    @include flex-wrap();
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    a {
        color: inherit;
        width: 100%;
        height: 100%;
        @include transition(0.3s);
        border-radius: inherit;
        &:hover {
            color: inherit;
        }
    }
    li {
        @include d-flex();
        @include align-items-center();
        @include justify-content-center();
        background-color: $accent_color;
        &:hover {
            -webkit-filter: brightness(1.2);
            filter: brightness(1.2);
        }
        + li {
            margin-left: 10px;
        }
    }
    svg {
        width: 1em;
        height: 1em;
        *[stroke^="#"],
        *[stroke^="url(#"] {
            stroke: currentColor;
        }
    }
    .dnetor-text-social {
        padding-left: 5px;
    }

    .dnetor-icon {
        @include d-flex();
        @include align-items-center();
        @include justify-content-center();
    }
}

li.dnetor-social-facebook {
    background-color: #3b5998;
    &.dnetor-social-outline {
        color: #3b5998;
    }
}

li.dnetor-social-twitter {
    background-color: #1da1f2;
    &.dnetor-social-outline {
        color: #1da1f2;
    }
}

li.dnetor-social-linkedin {
    background-color: #cd201f;
    &.dnetor-social-outline {
        color: #cd201f;
    }
}

li.dnetor-social-tumblr {
    background-color: #61ce70;
    &.dnetor-social-outline {
        color: #61ce70;
    }
}

li.dnetor-social-skype {
    background-color: #313b69;
    &.dnetor-social-outline {
        color: #313b69;
    }
}

li.dnetor-social-pinterest {
    background-color: #4054b2;
    &.dnetor-social-outline {
        color: #4054b2;
    }
}

li.dnetor-social-whatsapp {
    background-color: #cc8383;
    &.dnetor-social-outline {
        color: #cc8383;
    }
}

.dnetor-social-text,
.dnetor-social-classic {
    li {
        background-color: transparent;
        + li {
            margin-left: 1em;
        }
    }
}

.dnetor-social-rounded li {
    @include border-radius(10%);
}

.dnetor-social-circle li {
    @include border-radius(50%);
}

.dnetor-social-rounded,
.dnetor-social-circle,
.dnetor-social-square {
    li {
        width: 2.2em;
        height: 2.2em;
        color: #fff;
    }
}

.dnetor-social-share {
    li {
        cursor: pointer;
    }
}