import { styled } from '../../styled';
import { tooltipClassnames } from '../../Tooltip';
import { infiniteTreeListClassnames } from '../constants';
import { ANIMATION_DELAY } from './constants';
export const Wrapper = styled.div `
  @keyframes slide-in-from-left {
    0% {
      transform: translateX(-16px);

      opacity: 0;
    }

    100% {
      transform: translateX(0);

      opacity: 1;
    }
  }

  @keyframes slide-out-to-left {
    0% {
      transform: translateX(0);

      opacity: 1;
    }

    100% {
      transform: translateX(-16px);

      opacity: 0;
    }
  }

  will-change: transform, opacity;

  overflow: hidden;
  display: flex;
  align-items: center;

  min-height: 60px;
  margin-top: ${({ theme }) => theme.spacing(1)};
  margin-left: ${({ $level }) => `calc(${$level} * 20px)`};

  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
  border-radius: ${({ theme }) => theme.shape.medium};
  
  &.${infiniteTreeListClassnames.addAnimation} {
    animation: slide-in-from-left ${({ theme }) => theme.transitions.duration.short}ms ease-out;
    animation-fill-mode: both;
    animation-delay: ${({ $siblingIndex = 0 }) => $siblingIndex * ANIMATION_DELAY}ms;
  }

  &.${infiniteTreeListClassnames.removeAnimation} {
    animation: slide-out-to-left ${({ theme }) => theme.transitions.duration.shorter}ms ease-in forwards;
    animation-fill-mode: both;
    animation-delay: ${({ $siblingIndex = 0 }) => $siblingIndex * ANIMATION_DELAY}ms;
  }

  & > .${tooltipClassnames.contentWrapper} {
    width: 100%;
  }
`;
