@use "../theme";

.link {
  text-decoration: underline;
  border: 1px solid transparent;
  border-radius: theme.border-radius();
  transition:
    outline-color 100ms linear,
    border-color 100ms linear;
  outline: theme.spacing(1) solid transparent;
  padding: theme.spacing(1);
  margin: -#{theme.spacing(1)};
  text-underline-offset: 0.125em;
  outline-offset: 0;
  color: theme.color("link", "normal");
  cursor: pointer;
  background: transparent;

  &[data-focus-visible] {
    outline-color: theme.color("focus-dim");
    border-color: theme.color("focus");
  }

  &[data-hovered] {
    text-decoration: none;
  }

  &[data-disabled] {
    cursor: not-allowed;
    color: theme.color("button", "disabled", "foreground");
  }

  &[data-invert] {
    text-decoration: none;

    &[data-hovered] {
      text-decoration: underline;
    }
  }
}