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 {
  /**
   * @prop --c-spinner-color: Spinner color
   */
  --_c-spinner-color: var(--c-spinner-color, var(--c-color));
  --_c-spinner-size: var(--c-size);
  --_c-spinner-width: var(--c-width);
  display: block;
  height: var(--_c-spinner-size);
  width: var(--_c-spinner-size);
}

:host(.c-spinner) svg {
  fill: var(--_c-spinner-color);
  height: var(--_c-spinner-size);
  overflow: visible;
  width: var(--_c-spinner-size);
}
:host(.c-spinner) svg circle {
  animation: spinner 2.5s linear infinite;
  fill: transparent;
  stroke-dasharray: calc(3.14 * var(--_c-spinner-size));
  stroke-linecap: round;
  stroke-width: var(--_c-spinner-width);
  stroke: var(--_c-spinner-color);
  transform-origin: calc(0.5px * var(--_c-spinner-size)) calc(0.5px * var(--_c-spinner-size)) 0;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: calc(0.66 * var(--_c-spinner-size));
  }
  50% {
    transform: rotate(720deg);
    stroke-dashoffset: calc(3.14 * var(--_c-spinner-size));
  }
  100% {
    transform: rotate(1080deg);
    stroke-dashoffset: calc(0.66 * var(--_c-spinner-size));
  }
}