// HTML Element: Inline Elements

@use '00-config' as *;

a {
  @include focus();
  background-color: transparent;
  color: gesso-color(text, link);
  -webkit-text-decoration-skip: objects;
  transition-duration: gesso-duration(short);
  transition-property: background-color, border-color, color, outline-color;
  transition-timing-function: gesso-easing(ease-in);

  &:visited {
    color: gesso-color(text, link-visited);
  }

  &:hover,
  &:focus {
    color: gesso-color(text, link-hover);
  }

  &:active {
    color: gesso-color(text, link-active);
  }

  @media print {
    &,
    &:visited {
      text-decoration: none;
    }

    &[href]::after {
      content: ' <' attr(href) '>';
      font-family: gesso-font-family(primary);
      font-size: 10pt;
      font-weight: normal;
      text-transform: lowercase;
    }

    // Uncomment and replace example.com with your site’s domain.
    //&[href^='/']::after {
    //  content: ' <http://example.com' attr(href) '>';
    //}

    &[href^='javascript:']::after,
    &[href^='mailto:']::after,
    &[href^='tel:']::after,
    &[href^='#']::after,
    &[href*='?']::after {
      content: '';
    }
  }
}

abbr {
  &[title] {
    border-block-end: 0;
    text-decoration: underline;
    text-decoration: underline dotted;
  }

  &:hover {
    cursor: help;
  }

  @media print {
    &[title]::after {
      content: ' (' attr(title) ')';
    }
  }
}

// b {}

cite {
  @include display-text-style(cite);
}

// code {}

// del {}

dfn {
  font-style: italic;
}

// em {}

// i {}

// ins {}

// kbd {}

mark {
  background: gesso-color(mark, background);
  color: gesso-color(mark, text);
}

// q {}

// s {}

// samp {}

small {
  font-size: 75%;
}

// strong {}

sub {
  inset-block-end: -0.25em;
}

sup {
  inset-block-start: -0.5em;
}

// time {}

// u {}

// var {}
