/* Skeleton da <sptech-app-nav> enquanto /portal/nav.js carrega (a tag ainda não
   está definida). Copiado por `pnpm build:nav` para public/portal/nav.css e
   incluído pelos apps com <link rel="stylesheet" href="https://<portal>/portal/nav.css">.
   Os blocos ficam onde a nav desenha marca, apps, avatar, nome e a seta do menu
   (medidas de nav/app-nav.css); manter os dois arquivos em sincronia. */

@property --sptech-nav-skeleton {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(255 255 255 / 0.1);
}

@keyframes sptech-nav-skeleton-pulse {
  50% {
    --sptech-nav-skeleton: rgb(255 255 255 / 0.2);
  }
}

sptech-app-nav:not(:defined) {
  --sk: var(--sptech-nav-skeleton);
  display: block;
  position: sticky;
  top: 0;
  z-index: 50;
  height: 48px;
  background-color: #1f2a44;
  /* Ordem das camadas: marca, app 1, app 2, avatar, nome, seta do menu da conta. */
  background-image:
    linear-gradient(var(--sk), var(--sk)), linear-gradient(var(--sk), var(--sk)), linear-gradient(var(--sk), var(--sk)),
    radial-gradient(circle closest-side, var(--sk) 96%, transparent), linear-gradient(var(--sk), var(--sk)),
    linear-gradient(var(--sk), var(--sk));
  background-size:
    72px 12px,
    112px 12px,
    68px 12px,
    28px 28px,
    90px 12px,
    14px 8px;
  background-position:
    16px 18px,
    121px 18px,
    266px 18px,
    right 144px center,
    right 46px center,
    right 24px center;
  background-repeat: no-repeat;
  animation: sptech-nav-skeleton-pulse 1.4s ease-in-out infinite;
}

/* Igual à nav: o nome some em telas estreitas. */
@media (max-width: 640px) {
  sptech-app-nav:not(:defined) {
    background-size:
      72px 12px,
      112px 12px,
      68px 12px,
      28px 28px,
      0 0,
      14px 8px;
    background-position:
      16px 18px,
      121px 18px,
      266px 18px,
      right 46px center,
      0 0,
      right 24px center;
  }
}

@media (prefers-reduced-motion: reduce) {
  sptech-app-nav:not(:defined) {
    animation: none;
  }
}