////
/// @group helpers/links
////

/// Common link styles
///
/// Provides the typography and focus state, regardless of link style.
///
/// @access public

@mixin govuk-link-common {
  @include govuk-typography-common;
  @include govuk-link-decoration;

  &:hover {
    @include govuk-link-hover-decoration;
  }

  &:focus {
    @include govuk-focused-text;
  }
}

/// Link decoration
///
/// Provides the text decoration for links, including thickness and underline
/// offset. Use this mixin only if you cannot use the `govuk-link-common` mixin.
///
/// @access public
@mixin govuk-link-decoration {
  text-decoration: underline;

  @if ($govuk-new-link-styles) {
    @if ($govuk-link-underline-thickness) {
      text-decoration-thickness: $govuk-link-underline-thickness;
    }

    @if ($govuk-link-underline-offset) {
      text-underline-offset: $govuk-link-underline-offset;
    }
  }
}

/// Link hover decoration
///
/// Provides the text decoration for links in their hover state, for you to use
/// within a `:hover` pseudo-selector. Use this mixin only if you cannot use the
/// `govuk-link-common` mixin.
///
/// @access public

@mixin govuk-link-hover-decoration {
  @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
    text-decoration-thickness: $govuk-link-hover-underline-thickness;
    // Disable ink skipping on underlines on hover. Browsers haven't
    // standardised on this part of the spec yet, so set both properties
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none; // Chromium, Firefox
    -webkit-text-decoration-skip: none;
            text-decoration-skip: none; // Safari
  }
}

/// Default link styles
///
/// Makes links use the default unvisited, visited, hover and active colours.
///
/// If you use this mixin in a component, you must also include the
/// `govuk-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .govuk-component__link {
///     @include govuk-link-common;
///     @include govuk-link-style-default;
///   }
///
/// @access public

@mixin govuk-link-style-default {
  &:link {
    color: $govuk-link-colour;
  }

  &:visited {
    color: $govuk-link-visited-colour;
  }

  &:hover {
    color: $govuk-link-hover-colour;
  }

  &:active {
    color: $govuk-link-active-colour;
  }

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $govuk-focus-text-colour;
  }

  // alphagov/govuk_template includes a specific a:link:focus selector
  // designed to make unvisited link  s a slightly darker blue when focussed, so
  // we need to override the text colour for that combination of selectors so
  // so that unvisited links styled as buttons do not end up with dark blue
  // text when focussed.
  @include govuk-compatibility(govuk_template) {
    &:link:focus {
      color: $govuk-focus-text-colour;
    }
  }
}

/// Error link styles
///
/// Makes links use the error colour. The link will darken if it's active or a
/// user hovers their cursor over it.
///
/// If you use this mixin in a component, you must also include the
/// `govuk-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .govuk-component__link {
///     @include govuk-link-common;
///     @include govuk-link-style-error;
///   }
///
/// @access public

@mixin govuk-link-style-error {
  &:link,
  &:visited {
    color: $govuk-error-colour;
  }

  &:hover {
    color: scale-color($govuk-error-colour, $lightness: -30%);
  }

  &:active {
    color: $govuk-error-colour;
  }

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $govuk-focus-text-colour;
  }

  // alphagov/govuk_template includes a specific a:link:focus selector
  // designed to make unvisited link  s a slightly darker blue when focussed, so
  // we need to override the text colour for that combination of selectors so
  // so that unvisited links styled as buttons do not end up with dark blue
  // text when focussed.
  @include govuk-compatibility(govuk_template) {
    &:link:focus {
      color: $govuk-focus-text-colour;
    }
  }
}

/// Success link styles
///
/// Makes links use the success colour. The link will darken if it's active or a
/// user hovers their cursor over it.
///
/// If you use this mixin in a component, you must also include the
/// `govuk-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .govuk-component__link {
///     @include govuk-link-common;
///     @include govuk-link-style-success;
///   }
///
/// @access public

@mixin govuk-link-style-success {
  &:link,
  &:visited {
    color: $govuk-success-colour;
  }

  &:hover {
    color: scale-color($govuk-success-colour, $lightness: -30%);
  }

  &:active {
    color: $govuk-success-colour;
  }

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $govuk-focus-text-colour;
  }

  // alphagov/govuk_template includes a specific a:link:focus selector
  // designed to make unvisited link  s a slightly darker blue when focussed, so
  // we need to override the text colour for that combination of selectors so
  // so that unvisited links styled as buttons do not end up with dark blue
  // text when focussed.
  @include govuk-compatibility(govuk_template) {
    &:link:focus {
      color: $govuk-focus-text-colour;
    }
  }
}

/// Muted link styles
///
/// Makes links use the secondary text colour. The link will darken if it's
/// active or a user hovers their cursor over it.
///
/// If you use this mixin in a component, you must also include the
/// `govuk-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .govuk-component__link {
///     @include govuk-link-common;
///     @include govuk-link-style-muted;
///   }
///
/// @access public

@mixin govuk-link-style-muted {
  &:link,
  &:visited {
    color: $govuk-secondary-text-colour;
  }

  &:hover,
  &:active {
    color: $govuk-text-colour;
  }

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $govuk-focus-text-colour;
  }

  // alphagov/govuk_template includes a specific a:link:focus selector designed
  // to make unvisited links a slightly darker blue when focussed, so we need to
  // override the text colour for that combination of selectors.
  @include govuk-compatibility(govuk_template) {
    &:link:focus {
      @include govuk-text-colour;
    }
  }
}

/// Text link styles
///
/// Makes links use the primary text colour, in all states. Use this mixin for
/// navigation components, such as breadcrumbs or the back link.
///
/// If you use this mixin in a component, you must also include the
/// `govuk-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .govuk-component__link {
///     @include govuk-link-common;
///     @include govuk-link-style-text;
///   }
///
/// @access public

@mixin govuk-link-style-text {
  &:link,
  &:visited {
    @include govuk-text-colour;
  }

  // Force a colour change on hover to work around a bug in Safari
  // https://bugs.webkit.org/show_bug.cgi?id=224483
  &:hover {
    color: rgba($govuk-text-colour, .99);
  }

  &:active,
  &:focus {
    @include govuk-text-colour;
  }

  // alphagov/govuk_template includes a specific a:link:focus selector designed
  // to make unvisited links a slightly darker blue when focussed, so we need to
  // override the text colour for that combination of selectors.
  @include govuk-compatibility(govuk_template) {
    &:link:focus {
      @include govuk-text-colour;
    }
  }
}

/// Inverse link styles
///
/// Makes links white, in all states. Use this mixin if you're displaying links
/// against a dark background.
///
/// If you use this mixin in a component, you must also include the
/// `govuk-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .govuk-component__link {
///     @include govuk-link-common;
///     @include govuk-link-style-inverse;
///   }
///
/// @access public

@mixin govuk-link-style-inverse {
  &:link,
  &:visited {
    color: govuk-colour("white");
  }

  // Force a colour change on hover to work around a bug in Safari
  // https://bugs.webkit.org/show_bug.cgi?id=224483
  &:hover,
  &:active {
    color: rgba(govuk-colour("white"), .99);
  }

  &:focus {
    color: $govuk-focus-text-colour;
  }

  // alphagov/govuk_template includes a specific a:link:focus selector designed
  // to make unvisited links a slightly darker blue when focussed, so we need to
  // override the text colour for that combination of selectors.
  @include govuk-compatibility(govuk_template) {
    &:link:focus {
      color: $govuk-focus-text-colour;
    }
  }
}

/// Default link styles, without a visited state
///
/// Makes links use the default unvisited, hover and active colours, with no
/// distinct visited state.
///
/// Use this mixin when it's not helpful to distinguish between visited and
/// non-visited links. For example, when you link to pages with
/// frequently-changing content, such as the dashboard for an admin interface.
///
/// If you use this mixin in a component, you must also include the
/// `govuk-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .govuk-component__link {
///     @include govuk-link-common;
///     @include govuk-link-style-no-visited-state;
///   }
///
/// @access public

@mixin govuk-link-style-no-visited-state {
  &:link {
    color: $govuk-link-colour;
  }

  &:visited {
    color: $govuk-link-colour;
  }

  &:hover {
    color: $govuk-link-hover-colour;
  }

  &:active {
    color: $govuk-link-active-colour;
  }

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $govuk-focus-text-colour;
  }
}

/// Remove underline from links
///
/// Remove underlines from links unless the link is active or a user hovers
/// their cursor over it. This has no effect in Internet Explorer 8 (IE8),
/// because IE8 does not support `:not`.
///
/// @example scss
///   .govuk-component__link {
///     @include govuk-link-common;
///     @include govuk-link-style-default;
///     @include govuk-link-style-no-underline;
///   }
///
/// @access public

@mixin govuk-link-style-no-underline {
  &:not(:hover):not(:active) {
    text-decoration: none;
  }
}

/// Include link destination when printing the page
///
/// If the user prints the page, add the destination URL after the link text, if
/// the URL starts with `/`, `http://` or `https://`.
///
/// @access public

@mixin govuk-link-print-friendly {
  @include govuk-media-query($media-type: print) {
    &[href^="/"],
    &[href^="http://"],
    &[href^="https://"] {
      &:after {
        content: " (" attr(href) ")";
        font-size: 90%;

        // Because the URLs may be very long, ensure that they may be broken
        // at arbitrary points if there are no otherwise acceptable break
        // points in the line
        word-wrap: break-word;
      }
    }
  }
}