:root{
  --spinner-bg: #e0e0e0;
  --spinner-fg: #4a4a4a;
  --pc-text: #555;
  --pc-blind-bg: #ffffff;
}

[data-pc-theme="dark"]{
  --spinner-bg: #2a2a2a;
  --spinner-fg: #e5e5e5;
  --pc-text: #bbb;
  --pc-blind-bg: #000000;
}

.pc-loader {
  position: fixed;
  inset:0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--pc-blind-bg);
  pointer-events: all;
}

.pc-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--pc-text);
}

.pc-spinner{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
}

.pc-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50% !important;
  border:15px solid var(--spinner-bg);
}

.pc-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50% !important;
  border: 15px solid transparent;
  border-top-color: var(--spinner-fg);
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  animation: spin 1s cubic-bezier(.55,.15,.45,.85) infinite;
}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.pc-loader-text{
  font-size: 24px;
  opacity: .85;
}