import t from"react";import e from"styled-components";import{useSocketMessages as s}from"../../runtime/useSocketMessages";const l="pages-updated";function v(){const[a,o]=t.useState(0);return s(l,i=>o(i.pages)),a?t.createElement(g,null,t.createElement(c,{title:"Total number of pages in documentation"},t.createElement(n,null,"pages"),t.createElement(p,null,a),t.createElement(r,null,"pages"))):null}const r=e.span`
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  margin-left: var(--spacing-xxs);
`,p=e.span`
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  margin-left: var(--spacing-base);
`,n=e.span`
  font-size: 0.7em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-bottom: var(--spacing-xxs);
  position: absolute;
  left: var(--spacing-xxs);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
`,c=e.div`
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--color-blue-6);
  color: var(--text-color-on-color);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  font-size: var(--font-size-base);
  box-shadow: var(--bg-raised-shadow);
  min-height: 48px;
  width: 100%;
  min-width: 120px;

  &:hover {
    filter: brightness(0.85);
  }
`,g=e.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  top: calc(var(--navbar-height) + 70px);
  right: 0;
  transform: translateX(calc(100% - 18px));
  transition: all 0.3s ease-in-out;
  z-index: var(--z-index-popover);
  min-width: 120px;

  &:hover {
    transform: translateX(0);

    ${r} {
      opacity: 1;
    }

    ${n} {
      opacity: 0;
    }
  }
`;export{v as PageCounter};
