@mixin mask($iconName, $size: 24, $color: black) {
    $url: "/Content/Icons/black/#{$size}/#{$iconName}.svg";

    background-color: transparent;
    width: $size + px;
    height: $size + px;
    position: relative;
    z-index: 1;

    &:before {
        content: '';
        background-image: url(/Content/Icons/#{$color}/#{$size}/#{$iconName}_#{$size}.svg);
        opacity: $opacity-low;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: $size + px;
        height: $size + px;
    }

    &.white {
        &:before {
            background-image: url(/Content/Icons/white/#{$size}/#{$iconName}_#{$size}.svg);
        }
    }

    .menuOptions li.active &, .menuOptions li:hover & {
        &.mediaIcon::before {
            background-image: url(/Content/Icons/white/#{$size}/#{$iconName}_#{$size}.svg);
            opacity: $opacity-full;
        }
    }

    li.active &, li:hover & {
        &.mediaIcon::before {
            opacity: $opacity-medium;
        }
    }

    &.opacity-ultraminimal {
        &:before {
            opacity: $opacity-ultraminimal;
        }
    }

    &.opacity-halfminimal {
        &:before {
            opacity: $opacity-halfminimal;
        }
    }

    &.opacity-minimal {
        &:before {
            opacity: $opacity-minimal;
        }
    }

    &.opacity-low {
        &:before {
            opacity: $opacity-low;
        }
    }

    &.opacity-medium {
        &:before {
            opacity: $opacity-medium;
        }
    }

    &.opacity-high {
        &:before {
            opacity: $opacity-high;
        }
    }

    &.opacity-full {
        &:before {
            opacity: $opacity-full;
        }
    }

    &.mediaIconHoverable {
        @include transition(opacity, 0.2s, ease);

        &:hover {
            &:before {
                @include transition(opacity, 0.2s, ease);
                opacity: $opacity-medium;
            }
        }

        &:active {
            &:before {
                @include transition(opacity, 0.2s, ease);
                opacity: $opacity-medium;
            }
        }
    }

    &:hover, &:active, &:focus, &:visited {
    }
}