From 0d541dd780fe6d27221463a28a7f19abf194ff7a Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 30 Jul 2018 11:19:00 -0400
Subject: [PATCH] icon-link component

---
 scss/elements/_icon_link.scss | 47 +++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 scss/elements/_icon_link.scss

diff --git a/scss/elements/_icon_link.scss b/scss/elements/_icon_link.scss
new file mode 100644
index 00000000..334c21c4
--- /dev/null
+++ b/scss/elements/_icon_link.scss
@@ -0,0 +1,47 @@
+@mixin icon-link {
+  @include h5;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: $gap;
+  text-decoration: none;
+  background: none;
+  transition: background-color $hover-transition-time;
+  border-radius: $gap / 2;
+
+  .icon {
+    @include icon-color($color-primary);
+    @include icon-size(12);
+    margin-right: $gap;
+  }
+}
+
+@mixin icon-link-vertical {
+  flex-direction: column;
+
+  .icon {
+    margin: 0 $gap $gap;
+  }
+}
+
+@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
+  color: $color;
+
+  &:hover {
+    background-color: $hover-color;
+    color: $color;
+  }
+
+  .icon {
+    @include icon-color($color);
+  }
+}
+
+.icon-link {
+  @include icon-link;
+  @include icon-link-color($color-primary);
+
+  &.icon-link--vertical {
+    @include icon-link-vertical;
+  }
+}