Social Menu: Text

.c-social-menu {
    $iconSize: rem-calc(30);

    box-sizing: content-box;
    color: $color-black;

    @mixin colorizeItems($bgColor: $color-black, $iconColor: $color-white) {
        background-color: $bgColor;
        border-color: $bgColor;

        & > .c-social-menu__icon {
            fill: $iconColor;
        }

        &.c-social-menu__link {
            @include colorizeIcons($iconColor);
        }
    }

    @mixin colorizeIcons($iconColor: $color-black) {
        // TODO I could be a one-liner...
        &--facebook::before {
            @include icon('facebook', $iconColor);
        }

        &--mail::before {
            @include icon('mail', $iconColor);
        }

        &--instagram::before {
            @include icon('instagram', $iconColor);
        }

        &--twitter::before {
            @include icon('twitter', $iconColor);
        }

        &--whatsapp::before {
            @include icon('whatsapp', $iconColor);
        }

        &--youtube::before {
            @include icon('youtube', $iconColor);
        }

        &--skype::before {
            @include icon('skype', $iconColor);
        }

        &--linkedin::before {
            @include icon('linkedin', $iconColor);
        }
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

    &__item {
        &:not(:last-child) {
            margin-right: rem-calc(10);
        }
    }

    &__icon {
        fill: $color-black;
        height: rem-calc(15);
        width: rem-calc(15);

        @include transition(fill);
    }

    &__link {
        align-items: center;
        border: 1px solid currentColor;
        border-radius: 50%;
        color: currentColor;
        display: inline-block;
        height: $iconSize;
        justify-content: center;
        justify-items: center;
        overflow: hidden;
        position: relative;
        text-decoration: inherit;
        text-indent: 999px;
        transition: inherit;
        width: $iconSize;

        @include transition(background-color, border-color);

        &:active,
        &:focus,
        &:hover {
            @include colorizeItems($color-black, $color-white);
        }

        &::before {
            background-position: center center;
            background-repeat: no-repeat;
            content: ' ';
            display: block;
            height: rem-calc(30);
            width: rem-calc(30);

            @include transition(background-color, background-image);
        }

        // define Icons.
        @include colorizeIcons($color-black);

        &--skype {
            &::before {
                background-size: rem-calc(20);
            }
        }

        &--linkedin {
            &::before {
                background-size: rem-calc(18);
            }
        }
    }

    &--inverse {
        .c-social-menu {
            &__icon {
                fill: $color-white;
            }

            &__link {
                border-color: $color-white;

                &:active,
                &:focus,
                &:hover {
                    @include colorizeItems($color-white, $color-black);
                }

                &.c-social-menu__link {
                    @include colorizeIcons($color-white);
                }
            }
        }
    }

    // This modifier displays the social menu as a vertical list with the account names connected to each service.
    &--text {
        .c-social-menu {
            &__list {
                display: block;
                text-align: left; // Affects footer usage only
            }

            &__item {
                margin: 0;

                &:not(:first-child) {
                    margin: rem-calc(10) 0 0 0;
                }
            }

            &__link {
                background-color: $color-white;
                border-color: $color-grey-lighter;
                display: flex;
                flex-wrap: nowrap;
                justify-content: normal;
                overflow: visible;
                text-indent: 0;
                transition: all .25s;

                &:active,
                &:hover,
                &:focus {
                    @include colorizeItems($color-white, $color-black);

                    color: $color-grey;
                }

                &::before {
                    flex: 1 0 auto;
                    margin-right: rem-calc(10);
                }

                span {
                    flex: 1;
                    font-weight: 500;
                    white-space: nowrap;
                }
            }
        }
    }
}