html,
body {
  background-color: var(--phc-loader-bg);
  height: 100%;
}

:root {
  --phc-loader-bg: #f1f8fb;
  --phc-loader-card-bg: #ffffff;
  --phc-loader-card-shadow: 0 1px 3px rgba(38, 44, 50, 0.12),
    0 4px 24px rgba(38, 44, 50, 0.08);
  --phc-loader-progress-track: rgba(38, 44, 50, 0.12);
  --phc-loader-logo-fill: #929da9;
}

html[data-phc-color-mode='dark'] {
  --phc-loader-bg: #262c32;
  --phc-loader-card-bg: #35393d;
  --phc-loader-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --phc-loader-progress-track: rgba(255, 255, 255, 0.12);
  --phc-loader-logo-fill: #929da9;
}

.phc-app-loader {
  align-items: center;
  background-color: var(--phc-loader-bg);
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.phc-app-loader--overlay {
  inset: 0;
  position: fixed;
  z-index: 9999;
}

html[data-phc-color-mode='dark'] .phc-app-loader {
  background-image: radial-gradient(
      farthest-side at bottom left,
      rgba(0, 110, 183, 0.35),
      transparent 70%
    ),
    radial-gradient(
      farthest-corner at top right,
      rgba(0, 110, 183, 0.22),
      transparent 65%
    );
}

.phc-app-loader__card {
  align-items: center;
  background: var(--phc-loader-card-bg);
  border-radius: 15px;
  box-shadow: var(--phc-loader-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 290px;
  justify-content: space-between;
  max-width: 80%;
  min-width: 150px;
  padding: 64px;
  position: relative;
  width: 380px;
  z-index: 1;
}

.phc-app-loader__logo {
  flex: 1;
  fill: var(--phc-loader-logo-fill);
  height: auto;
  max-height: 130px;
  width: 175px;
}

.phc-app-loader__message {
  color: var(--phc-loader-logo-fill);
  font-family: 'Work Sans', 'Roboto', sans-serif;
  font-size: 14px;
  margin: 0;
  text-align: center;
}

.phc-app-loader__progress {
  background: var(--phc-loader-progress-track);
  border-radius: 0.25rem;
  height: 0.5rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.phc-app-loader__progress-bar {
  animation: phc-app-loader-indeterminate 1.4s ease-in-out infinite;
  background: linear-gradient(270deg, #307f71 16.82%, #006eb7 84.62%);
  border-radius: 0.25rem;
  height: 100%;
  position: absolute;
  width: 40%;
}

@keyframes phc-app-loader-indeterminate {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phc-app-loader__progress-bar {
    animation: none;
    left: 0;
    width: 100%;
  }
}