////
/// @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-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-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-functional-colour(link);
  }

  &:visited {
    color: govuk-functional-colour(link-visited);
  }

  &:hover {
    color: govuk-functional-colour(link-hover);
  }

  &:active {
    color: govuk-functional-colour(link-active);
  }

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

/// 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-functional-colour(error);
  }

  &:hover {
    color: govuk-colour("red", $variant: "shade-50");
  }

  &:active {
    color: govuk-functional-colour(error);
  }

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

/// 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-functional-colour(success);
  }

  &:hover {
    color: govuk-colour("green", $variant: "shade-50");
  }

  &:active {
    color: govuk-functional-colour(success);
  }

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

/// 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-functional-colour(secondary-text);
  }

  &:hover,
  &:active {
    color: govuk-functional-colour(text);
  }

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

/// 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,
  &:active {
    color: govuk-functional-colour(text);
  }

  &:focus {
    color: govuk-functional-colour(focus-text);
  }
}

/// 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");
  }

  &:focus {
    color: govuk-functional-colour(focus-text);
  }
}

/// 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-functional-colour(link);
  }

  &:visited {
    color: govuk-functional-colour(link);
  }

  &:hover {
    color: govuk-functional-colour(link-hover);
  }

  &:active {
    color: govuk-functional-colour(link-active);
  }

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

/// Remove underline from links
///
/// Remove underlines from links unless the link is active or a user hovers
/// their cursor over it.
///
/// @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 {
  @media 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;
      }
    }
  }
}

/// Image link styles
///
/// Prepares and provides the focus state for links that only contain images
/// with no accompanying text.
///
/// @access public

@mixin govuk-link-image {
  // Needed to draw the focus around the entire image
  display: inline-block;

  // Remove extra space at the bottom of the image that's added by line-height
  line-height: 0;

  // Don't render an underline
  text-decoration: none;

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

/*# sourceMappingURL=_links.scss.map */