// Original colors from Boost.

$activity-icon-administration-bg: #da58ef;

$activity-icon-assessment-bg: #f90086;

$activity-icon-collaboration-bg: #5b40ff;

$activity-icon-communication-bg: #eb6200;

$activity-icon-content-bg: #0099ad;

$activity-icon-interactivecontent-bg: #8d3d1b;// This is only to remove out current the Boost filters.

// For the final issue all those filters should be removed.

$activity-icon-administration-filter: '';

$activity-icon-assessment-filter: '';

$activity-icon-collaboration-filter: '';

$activity-icon-communication-filter: '';

$activity-icon-content-filter: '';

$activity-icon-interactivecontent-filter: '';// Create an array of colors for the activities.

// This is just to make it easier to change the colors in the future.

$activity-purpose-colors: () !default;

$activity-purpose-colors: map-merge(

    (

        "administration": $activity-icon-administration-bg,

        "assessment": $activity-icon-assessment-bg,

        "collaboration": $activity-icon-collaboration-bg,

        "communication": $activity-icon-communication-bg,

        "content": $activity-icon-content-bg,

        "interactivecontent": $activity-icon-interactivecontent-bg,

    ),

    $activity-purpose-colors

); 

// This is the magic mixin from https://jsfiddle.net/Tegos/3fchp0qm/

@mixin recolor($color: #000, $opacity: 1) {

    $r: red($color) / 255;

    $g: green($color) / 255;

    $b: blue($color) / 255;

    $a: $opacity;    // grayscale fallback if SVG from data url is not supported

    $lightness: lightness($color);

    filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);    // color filter

    $svg-filter-id: "recolor";

    filter: url('data:image/svg+xml;utf8,\

    <svg xmlns="http://www.w3.org/2000/svg">\

      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\

        <feColorMatrix type="matrix" values="\

          0 0 0 0 #{$r}\

          0 0 0 0 #{$g}\

          0 0 0 0 #{$b}\

          0 0 0 #{$a} 0\

        "/>\

      </filter>\

    </svg>\

    ##{$svg-filter-id}');

}

// Here we apply the filter to the icons.

// It is almost an exact copy of how we apply the

// filter right now, but it could be simplfied.

@each $type, $value in $activity-purpose-colors {

    .activityiconcontainer.#{$type} {

        &:not(.isbranded) {

            .activityicon,

            .icon {

                &:not(.nofilter) {

                    @include recolor($value, 0.8);

                }

            }

        }

    }

}