import styled, { css } from 'styled-components';
import { mix } from 'polished';
import { defaultThemeProp } from '../../theme';
import Button from '../Button';
import { FormDialog } from '../Dialog';
import { StyledDialogContent } from '../Dialog/Dialog.styles';
import { tryCatch } from '../../utils';
export const StyledContent = styled.div `
  margin-block-start: 0.25rem;
`;
StyledContent.defaultProps = defaultThemeProp;
export const StyledEditButton = styled(Button) `
  opacity: 0;
  pointer-events: none;
`;
StyledEditButton.defaultProps = defaultThemeProp;
export const StyledInlineEditDialog = styled(FormDialog)(({ theme }) => {
    return css `
    & > ${StyledDialogContent} {
      min-height: unset;
      padding-block-start: ${theme.base.spacing};
    }
  `;
});
StyledInlineEditDialog.defaultProps = defaultThemeProp;
export const StyledInlineEdit = styled.div(({ theme }) => {
    const hoverColor = tryCatch(() => mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive));
    return css `
    width: 100%;
    border: solid 0.0625rem transparent;
    margin-block-start: -0.25rem;

    &:hover,
    &:has(${StyledEditButton}:focus) {
      background: ${hoverColor};

      ${StyledEditButton}:not([aria-hidden]) {
        opacity: 1;
        pointer-events: auto;
      }
    }

    &:has(${StyledEditButton}[aria-hidden]) {
      background: ${hoverColor};
    }
  `;
});
StyledInlineEdit.defaultProps = defaultThemeProp;
//# sourceMappingURL=InlineEdit.styles.js.map