/* Adapted from https://codepen.io/lhorak/pen/bEavyg */
:vars {
  /* Mixin defaults, what to set these to? */
  border-radius: 5px;
  color-accent: #23085a;
  bg-color: white;
}

.textLink {
  color: value(color-accent);
  text-decoration: none;
  text-shadow:
    0px -2px 0 value(bg-color), 0px -1px 0 value(bg-color), 0px 0px 0 value(bg-color),
    2px -2px 0 value(bg-color), 2px -1px 0 value(bg-color), 2px 0px 0 value(bg-color),
    -2px -2px 0 value(bg-color), -2px -1px 0 value(bg-color), -2px 0px 0 value(bg-color),
    1px -2px 0 value(bg-color), 1px -1px 0 value(bg-color), 1px 0px 0 value(bg-color),
    -1px -2px 0 value(bg-color), -1px -1px 0 value(bg-color), -1px 0px 0 value(bg-color),
    0px -2px 0 value(bg-color), 0px -1px 0 value(bg-color), 0px 0px 0 value(bg-color);
  box-shadow:
    0 -1px 0 0 value(bg-color) inset,
    0 -2px 0 0 transparent inset;
  transition: all .2s ease-in;
}

.textLinkHover {
  box-shadow: 0 -1px 0 0 value(bg-color) inset, 0 -2px 0 0 value(color-accent) inset;
}

.textLink::selection {
  color: value(bg-color);
  background: value(color-accent);
  text-shadow: none;
}

.headerLink {
  -st-mixin: textLink;
  box-shadow: 0 -2px 0 0 white inset, 0 -4px 0 0 transparent inset;
}

.headerLinkHover {
  box-shadow: 0 -2px 0 0 white inset, 0 -4px 0 0 value(color-accent) inset;
}