import{jsx as e}from"react/jsx-runtime";import{css as t}from"styled-components";import{StatusCode as n}from"@redocly/theme/components/StatusCode/StatusCode";import{styled as i}from"../../styled-components.js";function g({tabs:o,onChange:a,activeTab:l}){return e(s,{children:o.map(r=>e(c,{$active:r.key===l?.key,onClick:()=>a(r),children:e(n,{status:r.key,children:r.title})},r.key))})}const s=i.ol`
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
`,c=i.li`
  display: inline-flex;
  align-items: center;
  list-style: none;

  padding: 0 var(--spacing-sm);
  background-color: transparent;
  height: 24px;
  border-radius: var(--border-radius);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);

  &,
  button {
    color: var(--text-color-secondary);

    ${({$active:o})=>o?t`
            color: var(--text-color-primary);
            background-color: var(--tab-bg-color-filled);
          `:t`
            &:hover {
              color: var(--text-color-primary);
            }
          `}
  }
`;export{g as Tabs};
