@charset "UTF-8";

/*********
 * Links *
 *********/

*:link {
  color: $link_color;
  &:visited {
    color: $link_visited_color;
    *:selected & { color: mix(s_color(text), s_color(normal), 60%); }
  }
  &:hover {
    color: lighten($link_color,10%);
    *:selected & { color: mix(s_color(text), s_color(normal), 90%); }
  }
  &:active {
    color: $link_color;
    *:selected & { color: mix(s_color(text), s_color(normal), 80%); }
  }
  &:backdrop, &:backdrop:hover, &:backdrop:hover:selected {
    color: backdrop(s_color(backdrop));
  }
  &:selected, *:selected & {
    color: mix(s_color(text), s_color(normal), 80%);
  }
}

.button:link, .button:visited {
  @extend %undecorated_button;
  @extend *:link;
  text-shadow: none;
  &:hover, &:active, &:checked {
    @extend %undecorated_button;
    text-shadow: none;
  }
  &:backdrop {
    @extend %undecorated_button; //This shouldn't be needed but avoids
                                 //a weird transition which for some reason
                                 //makes borders blink on hover
  }
}
