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

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

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

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

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

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

  @if $tbxforms-link-underline-thickness {
    text-decoration-thickness: $tbxforms-link-underline-thickness;
  }

  @if $tbxforms-link-underline-offset {
    text-underline-offset: $tbxforms-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
/// `tbxforms-link-common` mixin.
///
/// @access public

@mixin tbxforms-link-hover-decoration {
  @if $tbxforms-link-hover-underline-thickness {
    text-decoration-thickness: $tbxforms-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
    text-decoration-skip-ink: none; // Chromium, Firefox
    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
/// `tbxforms-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .tbxforms-component__link {
///     @include tbxforms-link-common;
///     @include tbxforms-link-style-default;
///   }
///
/// @access public

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

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

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

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

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $tbxforms-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
/// `tbxforms-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .tbxforms-component__link {
///     @include tbxforms-link-common;
///     @include tbxforms-link-style-error;
///   }
///
/// @access public

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

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

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

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $tbxforms-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
/// `tbxforms-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .tbxforms-component__link {
///     @include tbxforms-link-common;
///     @include tbxforms-link-style-success;
///   }
///
/// @access public

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

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

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

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $tbxforms-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
/// `tbxforms-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .tbxforms-component__link {
///     @include tbxforms-link-common;
///     @include tbxforms-link-style-muted;
///   }
///
/// @access public

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

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

  // When focussed, the text colour needs to be darker to ensure that colour
  // contrast is still acceptable
  &:focus {
    color: $tbxforms-focus-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
/// `tbxforms-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .tbxforms-component__link {
///     @include tbxforms-link-common;
///     @include tbxforms-link-style-text;
///   }
///
/// @access public

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

  // Force a colour change on hover to work around a bug in Safari
  // https://webkit.org/b/224483
  &:hover {
    @if type-of($tbxforms-text-colour) == color {
      color: rgba($tbxforms-text-colour, 0.99);
    }
  }

  &:active,
  &:focus {
    @include tbxforms-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
/// `tbxforms-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .tbxforms-component__link {
///     @include tbxforms-link-common;
///     @include tbxforms-link-style-inverse;
///   }
///
/// @access public

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

  // Force a colour change on hover to work around a bug in Safari
  // https://webkit.org/b/224483
  &:hover,
  &:active {
    color: rgba(tbxforms-colour("white"), 0.99);
  }

  &:focus {
    color: $tbxforms-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
/// `tbxforms-link-common` mixin to get the correct focus and hover states.
///
/// @example scss
///   .tbxforms-component__link {
///     @include tbxforms-link-common;
///     @include tbxforms-link-style-no-visited-state;
///   }
///
/// @access public

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

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

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

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

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

/// Remove underline from links
///
/// Remove underlines from links unless the link is active or a user hovers
/// their cursor over it.
///
/// @example scss
///   .tbxforms-component__link {
///     @include tbxforms-link-common;
///     @include tbxforms-link-style-default;
///     @include tbxforms-link-style-no-underline;
///   }
///
/// @access public

@mixin tbxforms-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 tbxforms-link-print-friendly {
  @include tbxforms-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;
      }
    }
  }
}

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

@mixin tbxforms-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 tbxforms-focused-box;
  }
}