import{css as i}from"styled-components";import{LayoutVariant as l}from"@redocly/config";import{H2 as p}from"@redocly/theme/components/Typography/H2";import{Markdown as d}from"@redocly/theme/components/Markdown/Markdown";import{breakpoints as o}from"@redocly/theme/core/openapi";import{SECTION_ATTR as c}from"../../constants.js";import{styled as t}from"../../styled-components.js";const f=t.div`
  ${({compact:a,isStacked:n,fullWidth:e})=>{const r=a?0:"var(--spacing-vertical)";return i`
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: ${r} var(--panel-gap-horizontal);

      &:empty {
        display: none;
      }

      @media screen and (min-width: ${o.large}) {
        width: ${e||n?"100%":"calc(100% - var(--panel-samples-width))"};
        padding-left: calc(var(--panel-gap-horizontal) * 2);
        padding-right: ${n?"var(--panel-gap-vertical)":"var(--panel-gap-horizontal)"};
        padding-top: 0;
        padding-bottom: ${n?"var(--spacing-vertical)":0};
      }

      @media print {
        width: 100%;
        padding-top: ${r};
        padding-bottom: ${r};
      }
    `}};

  ${({compact:a})=>a&&i`
      & & {
        padding-left: 0;
        padding-right: 0;
      }
    `}

  &:last-child > ${d} :last-child,
  ${d} article :last-child {
    margin-bottom: 0;
  }
`,w=t.div.attrs(a=>({[c]:a.sectionId,id:a.id}))`
  padding: 0;
  width: 100%;

  ${({expanded:a})=>a&&i`
      background-color: var(--layer-color);
      border-bottom: 1px solid var(--border-color-secondary);
      --code-block-bg-color: var(--bg-color);
      --code-block-controls-bg-color: var(--bg-color);
    `}

  & > &:last-child {
    min-height: initial;
  }

  @media screen and (min-width: ${o.medium}) {
    padding-top: var(--spacing-xs);

    ${({expanded:a})=>!a&&i`
        padding-bottom: var(--spacing-xs);
      `}
  }

  @media print {
    padding: 0;
  }

  ${({underlined:a})=>a&&i`
      position: relative;

      &:not(:last-of-type):after {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: block;
        content: '';
        border-bottom: 1px solid var(--border-color-secondary);
      }
    `}
  ${p} {
    position: relative;
  }
`,x=t.div`
  color: var(--panel-samples-text-color);
  width: 100%;
  height: fit-content;
  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;
  z-index: var(--panel-z-index);
  top: calc(var(--navbar-height) + var(--panel-gap-vertical));

  &:empty {
    display: none;
  }

  @media screen and (min-width: ${o.large}) {
    width: ${({isStacked:a})=>a?"100%":"var(--panel-samples-width)"};
    padding-top: 0;
    padding-bottom: 0;
    padding-left: ${({isStacked:a})=>a?"calc(var(--panel-gap-horizontal) * 2)":"var(--panel-gap-horizontal)"};
    padding-right: ${({isStacked:a})=>a?"var(--panel-gap-horizontal)":"calc(var(--panel-gap-horizontal) * 2)"};
  }

  @media print {
    width: 100%;
    padding-top: var(--spacing-vertical);
    padding-bottom: var(--spacing-vertical);
  }
`,y=t.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 0;

  @media screen and (min-width: ${o.large}) {
    flex-direction: ${({layout:a})=>a!==l.STACKED?"row":"column"};
  }

  @media print {
    flex-direction: column;
  }
`;export{y as Row,f as SamplesMiddlePanel,x as SamplesPanel,w as Section};
