import{H2,LayoutVariant,breakpoints,Markdown}from"@redocly/theme";import styled,{css}from"styled-components";import{SECTION_ATTR}from"../../constants";export const SamplesMiddlePanel=styled.div`
  ${({compact:a,isStacked:i,fullWidth:t})=>{const o=a?0:"var(--spacing-vertical)";return css`
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: ${o} var(--panel-gap-horizontal);

      &:empty {
        display: none;
      }

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

      @media print {
        width: 100%;
        padding-top: ${o};
        padding-bottom: ${o};
      }
    `}};
  & & {
    padding-left: 0;
    padding-right: 0;
  }

  &:last-child > ${Markdown} :last-child,
  ${Markdown} article :last-child {
    margin-bottom: 0;
  }
`;export const Section=styled.div.attrs((a=>({[SECTION_ATTR]:a.sectionId,id:a.id})))`
  z-index: 0;
  padding: 0;
  width: 100%;

  ${({expanded:a})=>a&&css`
      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: ${breakpoints.medium}) {
    padding-top: var(--spacing-xs);

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

  @media print {
    padding: 0;
  }

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

      &:not(:last-of-type):after {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: block;
        content: '';
        border-bottom: 1px solid var(--border-color-primary);
      }
    `}
  ${H2} {
    position: relative;
  }
`;export const SamplesPanel=styled.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: 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: ${breakpoints.large}) {
    width: var(--panel-samples-width);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: ${({isStacked:a})=>a?"var(--panel-gap-vertical)":"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);
  }
`;export const Row=styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 0;

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

  @media print {
    flex-direction: column;
  }
`;
//# sourceMappingURL=panels.js.map