1  import styled from 'styled-components'
 2  import { Colors } from '../constants/styles'
 3  import externalIcon from '../assets/images/ext.svg'
 4  
 5  export const LinkExternal = styled.a`
 6    color: ${Colors.BlueLink};
 7    position: relative;
 8    padding-right: 20px;
 9  
10    &:hover {
11      text-decoration: underline;
12    }
13  
14    &:active {
15      text-decoration: none;
16    }
17  
18    &::after {
19      content: '';
20      width: 11px;
21      height: 11px;
22      position: absolute;
23      top: 50%;
24      right: 0;
25      transform: translateY(-50%);
26      background-image: url(${externalIcon});
27      background-size: contain;
28    }
29  `
30  export const LinkInternal = styled.button`
31    color: ${Colors.VioletDark};
32    font-weight: 500;
33    font-size: 15px;
34    line-height: 22px;
35  
36    &:hover {
37      color: ${Colors.Violet};
38    }
39  
40    &:active {
41      color: ${Colors.VioletDark};
42    }
43  
44    &:disabled {
45      color: ${Colors.GrayDisabledDark};
46    }
47  `