/*
See All Link

A link to all content to which a subset of content before it belongs.

Markup:
<a class="c-see-all-link" href="#">
  <i class="c-see-all-link__icon  icon icon-push-right"></i>
  <span class="c-see-all-link__text">See All</span>
</a>

Styleguide Components.SeeAllLink
*/
@import url("../tools/x-truncate.css");



/* Base i.e. Container */

.c-see-all-link {
  display: inline-block;

  padding-top: 1.0em;
  padding-right: 1.0em;
  padding-bottom: 1.0em;
  margin-bottom: -1.0em; /* to "undo" space added from `padding-bottom` */

  @mixin truncate--one-line;
  max-width: 100%; /* SEE: https://stackoverflow.com/a/44521595 */

  font-size: 1.2rem;
  font-weight: var(--bold);
}



/* Children */

.c-see-all-link__icon {
  margin-right: 0.75em;

  font-size: 1.167em; /* to get size 14px from 12px base */
  vertical-align: text-bottom;

  /* To hide the `text-decoration: underline` of the anchor */
  /* SEE: https://stackoverflow.com/a/15688237/11817077 */
  display: inline-block;
}

.c-see-all-link__text {
  font-size: 1em;
}