"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Chevron = exports.IconWrapper = exports.NodeContainer = void 0;
const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
const styled_1 = require("../../styled");
exports.NodeContainer = (0, styled_1.styled)('dl', {
    shouldForwardProp: (prop) => prop !== 'level' && prop !== 'isExpandable',
}) `
  cursor: ${({ isExpandable }) => (isExpandable ? 'pointer' : 'default')};

  display: flex;
  gap: ${({ theme }) => theme.spacing(1)};
  align-items: center;

  margin: 0;
  margin-left: ${({ theme, level }) => theme.spacing(level * 5)};
  padding: ${({ theme }) => theme.spacing(1)};
  padding-left: 0;

  border-radius: ${({ theme }) => theme.shape.small};

  transition: ${({ theme }) => theme.transitions.create('background-color', {
    easing: theme.transitions.easing.easeIn,
    duration: theme.transitions.duration.shortest,
})};

  &:hover {
    background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
  }
`;
exports.IconWrapper = (0, styled_1.styled)('div', {
    shouldForwardProp: (prop) => prop !== 'color',
}) `
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;

  color: ${({ color }) => color};

  svg {
    width: 100%;
    height: 100%;
  }
`;
exports.Chevron = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd, {
    shouldForwardProp: (prop) => prop !== 'isExpanded',
}) `
  transform: rotateZ(${({ isExpanded }) => (isExpanded ? 90 : 0)}deg);

  transition: ${({ theme }) => theme.transitions.create('transform', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.short,
})};
`;
