import{jsx as e,jsxs as s,Fragment as w}from"react/jsx-runtime";import{memo as j}from"react";import{getOperationColor as z}from"@redocly/theme/core/openapi";import{Tooltip as k}from"@redocly/theme/components/Tooltip/Tooltip";import{joinWithSeparator as C}from"../../services/index.js";import{encodeBackSlashes as O}from"../../utils/index.js";import{HttpVerb as B,NavigationBadge as p}from"../common/index.js";import{styled as o}from"../../styled-components.js";import{StyledButton as I}from"./styled.js";function N({title:l,items:c,onClick:d,routingBasePath:h,translate:m}){return s(w,{children:[e(S,{children:l}),c.map(t=>{const{id:g,href:f,deprecated:r,badges:v,isAdditionalOperation:b,name:a}=t,x=t.type==="operation"?t.path:a,i=t.type==="operation"?t.httpVerb:t.type,u=z({isAdditionalOperation:b,deprecated:r,httpVerb:i});return e(k,{tip:a,placement:"left",children:e(V,{variant:"outlined",size:"large",onClick:()=>d(C(h,O(f))),children:s("span",{children:[e(B,{color:u,children:i}),e(_,{children:x}),r&&e(p,{deprecated:!0,children:m("openapi.badges.deprecated","Deprecated")}),v?.map(({name:n,color:y})=>e(p,{color:y,children:n},n))]})})},g)})]})}const G=j(N),S=o.span`
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-color-primary);
  margin: var(--spacing-sm) 0 var(--spacing-xxs) 0;
`,V=o(I)`
  border-radius: var(--border-radius);
  background: var(--bg-color);
  justify-content: space-between;
  width: 100%;

  & > span {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-unit);
    overflow-x: hidden;
  }

  &:hover {
    background: var(--bg-color);
  }

  &:hover::after {
    content: '→';
    line-height: var(--line-height-base);
  }
`,_=o.span`
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color-primary);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
`;export{G as OperationNavigationItems};
