From f8e7b4f10b7db36b494776d47f0f586a87502a4c Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Wed, 14 Jul 2021 21:33:42 -0400
Subject: [PATCH] fix(Role): don't show role state svgs on mobile hover

---
 packages/design-system/atoms/role/Role.styled.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/design-system/atoms/role/Role.styled.tsx b/packages/design-system/atoms/role/Role.styled.tsx
index cc00b95..8a06761 100644
--- a/packages/design-system/atoms/role/Role.styled.tsx
+++ b/packages/design-system/atoms/role/Role.styled.tsx
@@ -1,3 +1,4 @@
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
 import { palette } from '@roleypoly/design-system/atoms/colors';
 import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
@@ -63,6 +64,11 @@ export const Outer = styled.div<StyledProps>`
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
             ${Circle} svg {
               fill-opacity: 1;
+              ${onSmallScreen(
+                css`
+                  fill-opacity: 0;
+                `
+              )}
             }
           }