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-loader-color: Loader color
   * @prop --c-loader-background-color: Loader background color
   * @prop --c-loader-text-color: Loader text color
   */
  --_c-loader-color: var(--c-loader-color, var(--c-primary-600));
  --_c-loader-background-color: var(--c-loader-background-color, rgba(var(--c-white-rgb), 0.8));
  --_c-loader-text-color: var(--c-loader-text-color, var(--c-text-system));
  --_c-stroke-start-dasharray: 1, 200;
  --_c-stroke-end-dasharray: 89, 200;
  width: 100%;
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--_c-loader-background-color);
  border-radius: inherit;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

:host(.active) {
  opacity: 1;
  visibility: visible;
}
:host(.active) .c-loader {
  transform: scale(1);
}

.c-loader {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: scale(0.5);
  transition: transform 0.3s ease-in-out;
}
.c-loader__slot {
  line-height: 40px;
  font-size: 14px;
  color: var(--_c-loader-text-color);
  text-align: center;
  font-weight: 500;
  display: block;
  max-height: 0;
  overflow: hidden;
  animation-duration: 4s;
  animation-direction: forwards;
  animation-iteration-count: 1;
  animation-name: fadein;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-stroke {
  0% {
    stroke-dasharray: var(--_c-stroke-start-dasharray);
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: var(--_c-stroke-end-dasharray);
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: var(--_c-stroke-end-dasharray);
    stroke-dashoffset: -124;
  }
}
@keyframes fadein {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 300px;
  }
}