// Links

// Use CSS variables for link colors to make it easy to override in marketing page
:root {
  --link-color: var(--link-ui);
  --link-hover-color: var(--link-ui-hover);
  --link-visited-color: var(--link-ui-visited);
  --link-color-dark: var(--link-ui-dark);
  --link-hover-color-dark: var(--link-ui-hover-dark);
  --link-visited-color-dark: var(--link-ui-visited-dark);
  --link-text-decoration: underline;
  --link-hover-text-decoration: none;
}

a {
  color: var(--link-color);
  text-decoration: var(--link-text-decoration);

  &:visited {
    color: var(--link-visited-color);
  }

  &:hover {
    color: var(--link-hover-color);
    text-decoration: var(--link-hover-text-decoration);
  }
}

.link-monospace {
  @include font-mono;

  font-weight: 500;
  color: var(--green-50);

  &:hover {
    color: var(--green-60);
  }
}

.link-black-text {
  color: var(--neutral-90);
  text-decoration: none;
  font-weight: 600;

  &:visited {
    color: var(--neutral-90);
  }

  &:hover {
    color: var(--neutral-90);
    text-decoration: underline;
  }
}

.link-black-full-width {
  @extend .link-black-text;

  display: flex;
  width: 100%;
  justify-content: space-between;
}