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-row) {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--_c-row-gap);
}
:host(.c-row) slot {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--_c-row-gap);
}

:host(.c-row--nowrap) slot {
  flex-wrap: nowrap !important;
}

:host(.c-row--align-center) slot {
  align-items: center;
}

:host(.c-row--align-start) slot {
  align-items: flex-start;
}

:host(.c-row--align-end) slot {
  align-items: flex-end;
}

:host(.c-row--justify-start) slot {
  justify-content: flex-start;
}

:host(.c-row--justify-center) slot {
  justify-content: center;
}

:host(.c-row--justify-end) slot {
  justify-content: flex-end;
}

:host(.c-row--justify-space-between) slot {
  justify-content: space-between;
}

:host(.c-row--justify-space-around) slot {
  justify-content: space-around;
}