html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:host(c-link) {
  /**
   * @prop --_c-link-color: Link color
   * @prop --_c-link-hover: Link hover background color
   */
  --_c-link-color: var(--c-link-color, var(--c-info-700));
  --_c-link-hover: var(--c-link-hover, var(--c-accent-200));
}
:host(c-link) a {
  --_c-link-icon-margin: 8px;
  align-items: center;
  background-color: var(--c-transparent);
  color: var(--_c-link-color);
  cursor: pointer;
  display: inline-flex;
  font-size: inherit;
  gap: var(--_c-link-icon-margin);
  justify-content: start;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}
:host(c-link) a:hover {
  background-color: var(--_c-link-hover);
}
@supports selector(:focus-visible) {
  :host(c-link) a:focus {
    outline: none;
  }
}
:host(c-link) a:focus-visible {
  outline: 2px var(--_c-link-color) solid;
  outline-offset: 4px;
  border-radius: 2px;
}
:host(c-link) a.underline {
  text-decoration: underline;
}