"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Wrapper = void 0;
const styled_1 = require("../../styled");
const Tooltip_1 = require("../../Tooltip");
const constants_1 = require("../constants");
const constants_2 = require("./constants");
exports.Wrapper = styled_1.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};
  
  &.${constants_1.infiniteTreeListClassnames.addAnimation} {
    animation: slide-in-from-left ${({ theme }) => theme.transitions.duration.short}ms ease-out;
    animation-fill-mode: both;
    animation-delay: ${({ $siblingIndex = 0 }) => $siblingIndex * constants_2.ANIMATION_DELAY}ms;
  }

  &.${constants_1.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 * constants_2.ANIMATION_DELAY}ms;
  }

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