import styled from "styled-components";
import { currentTheme } from "../../theme";
export const Wrapper = styled.div `
  width: 100%;
`;
export const ItemWrapper = styled.div `
  width: 100%;
  border-top: 1px solid ${currentTheme.colors.border};
`;
export const ItemTitle = styled.div `
  width: 100%;
  min-height: 36px;

  padding: 8px 0;
  display: flex;
  align-items: center;
  cursor: pointer;

  position: relative;
`;
export const ItemContent = styled.div(({ open, maxHeight }) => `
  width: 100%;
  padding: ${open ? "8px" : "0"} 0;

  max-height: ${open ? maxHeight ?? "400px" : "0"};

  transition: 0.2s;
  overflow: hidden;
`);
export const ItemIcon = styled.div(({ open }) => `

  position: absolute;
  right: 0;
  top: calc(50% - 9px);

  transition: 0.2s;
  transform: rotate(${open ? "180" : "0"}deg);
`);
//# sourceMappingURL=styled.js.map