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 {
  left: 0;
  max-width: 100%;
  min-width: 30vw;
  pointer-events: none;
  position: fixed;
  right: 0;
  width: 640px;
  z-index: 10000;
}

:host > div {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 12px;
}

:host(.absolute) {
  position: absolute;
}

:host(.bottom) {
  bottom: 0;
}

:host(.top) {
  top: 0;
}

:host(.right) {
  justify-content: end;
  left: auto;
  right: 0;
}

:host(.left) {
  justify-content: start;
  left: 0;
  right: auto;
}

:host(.center) {
  justify-content: center;
  margin: 0 auto !important;
}