// Link and buttons

#breadcrumbs a,
figcaption a,
p a,
.page-tags a,
table a,
#crosslinks a:not(.highlight),
li a,
dl a {
  @include link-underline($back-white, $text-dark);

  &:hover {
    @include text-underline-crop($back-white);
    @include text-background($back-white, $text-dark);
    @include text-selection($back-white);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: 0% 100%;
    background-size: 0.8em auto;
    text-decoration: none;
  }

  &[href^="#"] {
    color: $text-gray;
    &:hover {
      @include link-underline($back-white, $text-medium);
    }
  }
}

#theme-switch:checked ~ #page {
  #breadcrumbs a,
  figcaption a,
  p a,
  .page-tags a,
  table a,
  #crosslinks a:not(.highlight),
  li a,
  dl a {
    &:hover {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    }
  }
}

#content .page-intro p a,
#footnotes a {
  @include link-underline($back-white, $text-gray);

  &:hover {
    @include link-underline($back-light, $text-gray);
  }
}

.pile-link::before {
  background-color: $back-white;
  content: "‹\00a0";
}

.pile-link::after {
  background-color: $back-white;
  content: "\00a0›";
}

#crosslinks {
  margin-top: 20px;
  a:not(.highlight) {
    @include tag;
  }
}

.btn {
  @include button(1px, 14px, 7px);
  cursor: pointer;
}

.btn.disabled {
  color: $text-light;
  &:hover {
    cursor: default;
  }
}

.btn.small {
  @include button(1px, 12px, 3px);
  padding-right: 9px;
  padding-left: 9px;
}

.btn.highlight {
  text-shadow: none;
  text-decoration: none;
  color: $text-dark;
  background-color: yellow;
}

.btn.primary {
  text-shadow: none;
  text-decoration: none;
  color: $back-white;
  background-color: $accent;

  &:hover {
    background-color: $back-light;
    background-image: none;
    color: $text-dark;
  }
}

.image-link, .image-link:hover {
  @include link-reset();
}