import styled, { css } from 'styled-components';
import { transparentize } from 'polished';
import { StyledButton } from '../Button';
import Icon, { StyledIcon } from '../Icon';
import Text from '../Text';
import { StyledFlex } from '../Flex';
import { StyledProgressRing } from '../Progress';
import { defaultThemeProp } from '../../theme';
import { useDirection } from '../../hooks';
import { ellipsisOverflow } from '../../styles/mixins';
import Tree, { StyledTreeListItem } from './Tree';
export const StyledToggleIcon = styled(Icon) ``;
export const StyledNodeActions = styled.div ``;
export const StyledSecondaryText = styled(Text) ``;
export const StyledLabelContent = styled.div(({ theme }) => {
    return css `
    &:has(${StyledSecondaryText}) {
      margin-block: calc(${theme.base.spacing} / 2);
    }

    &,
    ${StyledFlex}, ${StyledFlex} span {
      ${ellipsisOverflow}
    }
  `;
});
StyledLabelContent.defaultProps = defaultThemeProp;
export const StyledNodeIcon = styled(Icon) ``;
export const StyledNodeText = styled.span ``;
export const StyledToggleIconWrapper = styled.div(({ theme }) => {
    return css `
    min-height: ${theme.base['hit-area'].compact};
    min-width: ${theme.base['hit-area'].compact};
  `;
});
StyledToggleIconWrapper.defaultProps = defaultThemeProp;
export const StyledStandardTreeItemSubTree = styled.div(({ theme, lined }) => {
    return css `
    position: relative;

    ${lined &&
        css `
      ::before {
        content: '';
        display: block;
        position: absolute;
        z-index: 1;
        background-color: currentColor;
        inset-block-start: -${theme.base.spacing};
        inset-block-end: 0;
        inset-inline-start: calc(
          calc(var(--parent-caret-width) * var(--depth) + var(--initial-padding)) +
            calc(${theme.base['hit-area'].compact} / 2) - (0.0625rem / 2)
        );
        width: 0.0625rem;
        opacity: 0.2;
        transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
      }
    `}

    ${StyledProgressRing} {
      margin: calc(${theme.base.spacing} * 1.25) 0;
      margin-inline-start: calc(
        var(--parent-caret-width) * (var(--depth) + 1) + var(--initial-padding) + 0.625rem
      );
    }
  `;
});
StyledStandardTreeItemSubTree.defaultProps = defaultThemeProp;
export const StyledLoadMoreButton = styled(StyledButton)(({ theme }) => {
    return css `
    padding-inline-start: calc(${theme.base.spacing} / 2);
  `;
});
StyledLoadMoreButton.defaultProps = defaultThemeProp;
export const StyledNodeInteraction = styled.div(({ theme }) => {
    return css `
    color: ${theme.base.palette['foreground-color']};
    text-decoration: none;
    min-height: 2.25rem;
    padding-inline-start: calc(var(--parent-caret-width) * var(--depth) + var(--initial-padding));
    padding-inline-end: calc(var(--initial-padding) + ${theme.base.spacing});
    cursor: pointer;

    & > ${StyledNodeActions} {
      display: none;
      ${StyledButton} {
        margin-inline-start: calc(${theme.base.spacing} / 2);
      }
    }

    &:focus,
    &:focus-within {
      box-shadow: ${theme.base.shadow['focus-inset']};

      ${StyledLoadMoreButton} {
        box-shadow: none;
      }

      & > ${StyledNodeActions} {
        display: flex;
      }
    }

    &:focus-visible {
      outline: none;
    }

    &:hover {
      background-color: ${transparentize(0.9, theme.base.palette.interactive)};

      & > ${StyledNodeActions} {
        display: flex;
      }
    }

    &[aria-current='page'],
    &[aria-current='true'] {
      background-color: ${transparentize(0.95, theme.base.palette['foreground-color'])};

      & > ${StyledLabelContent}, & > :first-child > ${StyledLabelContent} {
        font-weight: ${theme.base['font-weight']['semi-bold']};
      }

      & > ${StyledNodeActions} {
        display: flex;
      }
    }
  `;
});
StyledNodeInteraction.defaultProps = defaultThemeProp;
export const StyledStandardTreeLeaf = styled.div(() => {
    return css `
    ${StyledNodeInteraction} {
      padding-inline-start: calc(
        var(--initial-padding) + (var(--parent-caret-width) * var(--depth)) +
          (var(--parent-caret-spacing-width) * (max(var(--has-parent-sibling), var(--has-parent))))
      );
    }
  `;
});
StyledStandardTreeLeaf.defaultProps = defaultThemeProp;
export const StyledStandardTreeParent = styled(StyledNodeInteraction)(({ theme }) => {
    const { ltr } = useDirection();
    return css `
      &[aria-expanded='true'] ${StyledToggleIcon} {
        transform: rotate(90deg);
      }

      &[aria-expanded='false'] {
        ${StyledToggleIcon} {
          transform: rotate(${ltr ? '0' : '180'}deg);
        }

        + ${StyledStandardTreeItemSubTree} {
          display: none;
        }
      }

      &:hover + ${StyledStandardTreeItemSubTree}::before {
        opacity: 0.5;
      }

      ${StyledToggleIcon} {
        transition: transform calc(${theme.base.animation.speed} / 2)
          ${theme.base.animation.timing.ease};
      }
    `;
});
StyledStandardTreeParent.defaultProps = defaultThemeProp;
export const StyledStandardTreeNode = styled.div(({ theme }) => css `
    --initial-padding: calc(${theme.base.spacing} * 0.5);
    --parent-caret-width: 1em;
    --parent-caret-spacing-width: max(
      (var(--parent-caret-width) + (2 * ${theme.components.button['border-width']})),
      ${theme.base['hit-area'].compact}
    );

    ${StyledIcon} {
      width: var(--parent-caret-width);
      height: var(--parent-caret-width);
    }
  `);
StyledStandardTreeNode.defaultProps = defaultThemeProp;
export const StyledStandardTree = styled(Tree) `
  ${StyledTreeListItem} {
    display: block;
  }
`;
StyledStandardTree.defaultProps = defaultThemeProp;
export const StyledLabelContainer = styled.span `
  width: 100%;
`;
StyledLabelContainer.defaultProps = defaultThemeProp;
// FIXME: We need to determine why styled-component types are "eating" our types.
StyledStandardTree.defaultProps = defaultThemeProp;
//# sourceMappingURL=StandardTree.styles.js.map