a, a:visited { text-decoration: none; } .link--primary, .link--primary:visited { color: $interactive-color; } .link--brand, .link--brand:visited { color: $brand-color; } .link--secondary, .link--secondary:visited { margin: 0px; padding: 0.3em; color: $secondary-color; } .link--nav { color: $primary-color; border-bottom: 2px solid white; } .link--nav:hover { color: $interactive-color; } .link--nav-active { color: $interactive-color; border-bottom: 2px solid $interactive-color; } .link--icon, .link--icon:visited { display: flex; .link-text { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: all 0.2s ease; } .icon-wrap { margin-left: 5px; padding-top: 3px; align-items: center; svg { width: 16px; height: 16px; stroke: $grey; transition: all 0.2s ease; } } &:hover { .link-text { border-bottom: 1px solid $brand-color; } svg { stroke: $brand-color; } } } .link--hover { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: all 0.2s ease; &:hover { border-bottom: 1px solid $brand-color; } }