@redocly/graphql-docs/lib-esm/src/app/components/RightSection.js

Redocly GraphQL docs

import{jsx as n}from"react/jsx-runtime";import{breakpoints as r,LayoutVariant as o}from"@redocly/theme";import{useSettings as p}from"../../settings/index.js";import{styled as l}from"../../styled-components.js";const c=l.section`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  width: 100%;
  padding-top: var(--panel-gap-vertical);
  padding-bottom: var(--panel-gap-vertical);
  padding-left: ${({isStacked:a})=>a?"calc(var(--panel-gap-horizontal) * 2)":"var(--panel-gap-horizontal)"};
  padding-right: var(--panel-gap-horizontal);

  position: sticky;
  top: calc(var(--navbar-height) + var(--panel-gap-vertical));

  @media screen and (min-width: ${r.large}) {
    width: ${({isStacked:a})=>a?"100%":"calc(var(--panel-samples-width) - 32px)"}; // 32px = gap/2 between blocks
  }
`;function m({children:a}){const t=p(),{layout:i}=t||{},e=i===o.STACKED;return n(c,{isStacked:e,children:a})}export{m as RightSection,c as RightSectionWrapper};