import*as e from"react";import i,{css as r}from"styled-components";import{CopyIcon as l}from"@redocly/theme/icons/CopyIcon/CopyIcon";import{CopyAction as a}from"./CopyAction";import s from"./VisibilityToggle";import{ShadowButton as c}from"./ShadowButton";function y({secret:t}){const[o,n]=e.useState(!1);return e.createElement(m,null,e.createElement(d,{visible:o},t),e.createElement(p,{visible:o},e.createElement(s,{visible:o,onClick:()=>n(!o)}),e.createElement(a,{text:t},e.createElement(c,null,e.createElement(l,null)))))}const m=i.div`
  position: relative;
  max-width: '200px';
  min-width: 'fit-content';
`,p=i.div`
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);

  &:before {
    content: 'some-fake-secret-for-blurred-effect';
    display: block;
    position: absolute;
    color: transparent;
    text-shadow: 0 0 8px var(--text-color-secondary);
  }

  ${({visible:t})=>t?r`
          &:before {
            display: none;
          }
        `:""}
`,d=i.div`
  visibility: hidden;
  user-select: none;
  height: 0;
  overflow: auto;
  text-overflow: unset;
  white-space: normal;
  word-break: break-all;
  color: var(--text-color-secondary);
  max-width: 400px;

  ${({visible:t})=>t?r`
          position: relative;
          margin-bottom: 15px;
          user-select: text;
          visibility: visible;
          height: auto;
        `:""};
`;export{y as ApiKeySecret};
