"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SkeletonDescription = exports.ItemWrapper = exports.ListWrapper = exports.Wrapper = void 0;
const Skeleton_1 = require("../Skeleton");
const styled_1 = require("../styled");
exports.Wrapper = (0, styled_1.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;
  }
`;
exports.ListWrapper = (0, styled_1.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)};
`;
exports.ItemWrapper = styled_1.styled.div `
  display: flex;
  gap: ${({ theme }) => theme.spacing(3)};
  align-items: center;
`;
exports.SkeletonDescription = (0, styled_1.styled)(Skeleton_1.Skeleton, {
    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
}) `
  display: ${({ $isPinned }) => ($isPinned ? 'unset' : 'none')};
`;
