import { Skeleton } from '../Skeleton';
import { styled } from '../styled';
export const Wrapper = styled('div', {
    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
}) `
  position: relative;

  grid-column: 1;
  grid-row: 2 / -1;

  width: ${({ $isPinned }) => ($isPinned ? '242px' : '58px')};
  padding: ${({ theme, $isPinned }) => $isPinned ? theme.spacing(4, 3) : theme.spacing(4, 2)};

  background-color: ${({ theme }) => theme.palette.background.default};
  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
  border-radius: ${({ theme }) => theme.shape.medium};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const ListWrapper = styled('div', {
    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
}) `
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(4)};

  padding: ${({ theme, $isPinned }) => $isPinned ? theme.microSpacing(12, 3) : theme.microSpacing(12, 5)};
`;
export const ItemWrapper = styled.div `
  display: flex;
  gap: ${({ theme }) => theme.spacing(3)};
  align-items: center;
`;
export const SkeletonDescription = styled(Skeleton, {
    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
}) `
  display: ${({ $isPinned }) => ($isPinned ? 'unset' : 'none')};
`;
