Icon: Virtual Marketing

@import "brand/assets/fonts/icons/ss_ficons_mkt"; // This SCSS file is built by `gulp iconfont`
.icons {
    &,
    svg {
        position: absolute;
        width: 0;
        height: 0;
    }
}
.icon {
    &._circle._before::before,
    &._circle._after::after {
        @include circle-background($background: transparent, $color: theme-color(main), $font-size: 1.75*$font-size-base, $border-color: theme-color(main));
    }
    &._circle._smaller._before::before,
    &._circle._smaller._after::after {
        @include circle-size(.75*$font-size-base);
    }
    &._circle._small._before::before,
    &._circle._small._after::after {
        @include circle-size(1.25*$font-size-base);
    }
    &._circle._large._before::before,
    &._circle._large._after::after {
        @include circle-size(2.25*$font-size-base);
    }
    &._circle._font-large._before::before,
    &._circle._font-large._after::after {
        // ¯\_(ツ)_/¯
        @include circle-size(2.25*$font-size-base, 2px, 3.5*$font-size-base);
    }
    &._circle._white._before::before,
    &._circle._white._after::after {
        @include circle-color($background: transparent, $color: theme-color(text, inverse), $border-color: get-color(neutral, 0));
    }
    &._circle._solid._white._before::before,
    &._circle._solid._white._after::after {
        @include circle-color($background: get-color(neutral, 0), $color: theme-color(main, dark), $border-color: get-color(neutral, 0));
    }
    &._circle._twocolor._before,
    &._circle._twocolor._after {
        &::before,
        &::after {
            @include circle-color($background: transparent, $color: theme-color(text, inverse), $border-color: theme-color(main, light));
        }
        &.is-active::before,
        &.is-active::after {
            @include circle-color(transparent, theme-color(main, darkest), theme-color(main));
        }
    }
    &._circle._gray._before::before,
    &._circle._gray._after::after {
        @include circle-color($background: get-color(neutral, 200), $color: theme-color(text, inverse));
    }
    &._circle._gray._inverse._before::before,
    &._circle._gray._inverse._after::after {
        @include circle-color($background: transparent, $color: get-color(neutral, 400), $border-color: get-color(neutral, 400));
    }
    &._circle._green._before::before,
    &._circle._green._after::after {
        @include circle-color($background: theme-color(main), $color: theme-color(text, inverse));
    }
    &._circle._teal._before::before,
    &._circle._teal._after::after {
        @include circle-color($background: get-color(teal, 600), $color: theme-color(text));
    }
    &._circle._blue._before::before,
    &._circle._blue._after::after {
        @include circle-color($background: get-color(aqua, 700), $color: theme-color(text, inverse));
    }
    &._circle._blue._light._before::before,
    &._circle._blue._light._after::after {
        @include circle-color($background: to get-color(aqua, 600), $color: theme-color(text, inverse));
    }
    &._circle._inverse._before,
    &._circle._inverse._after {
        &::before,
        &::after {
            @include circle-color($background: transparent, $color: get-color(neutral, 400), $border-color: get-color(neutral, 400));
        }
        &.is-active::before,
        &.is-active::after {
            @include circle-color($background: theme-color(main), $color: theme-color(text, inverse), $border-color: theme-color(main));
        }
    }
    &._circle._twitterblue._before::before,
    &._circle._twitterblue._after::after,
    &._circle._twitter._blue._before::before,
    &._circle._twitter._blue._after::after {
        @include circle-color($background: get-network-color(twitter), $color: theme-color(text, inverse));
    }
    &._circle._facebook._blue._before::before,
    &._circle._facebook._blue._after::after {
        @include circle-color($background: get-network-color(facebook), $color: theme-color(text, inverse));
    }
    &._circle._linkedin._blue._before::before,
    &._circle._linkedin._blue._after::after {
        @include circle-color($background: get-network-color(linkedin), $color: theme-color(text, inverse));
    }
    &._circle._instagram._blue._before::before,
    &._circle._instagram._blue._after::after {
        @include circle-color($background: get-network-color(instagram), $color: theme-color(text, inverse));
    }
    &._circle._youtube._red._before::before,
    &._circle._youtube._red._after::after {
        @include circle-color($background: get-network-color(youtube), $color: theme-color(text, inverse));
    }
    &._circle._googleplus._red._before::before,
    &._circle._googleplus._red._after::after {
        @include circle-color($background: get-network-color(googleplus), $color: theme-color(text, inverse));
    }
    &._social._before::before,
    &._social._after::after {
        @include circle-color($background: get-color(neutral, 300));
    }
}