@import "../vendor/cyclist-grid/dist/scss/cyclist-grid.scss";
@import "layout";
@import "typography";

ul#social {
  display: flex;
  justify-content: flex-end;
  margin: $leading-height * 2 0 0;
}

ul#social li {
  list-style: none;
  width: 22px;
  text-align: center;
}

ul#social li a {
  display: block;
}

ul#social li a svg {
  margin: auto;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

ul#social li a:visited svg {
  // This doesn't actually, because `:visited` has security-related limitations
  filter: invert(49%) sepia(13%) saturate(0%) hue-rotate(134deg) brightness(103%) contrast(85%);
}

ul#social li a:hover svg {
  filter: invert(31%) sepia(0%) saturate(439%) hue-rotate(189deg) brightness(99%) contrast(87%);
}