import styled from "styled-components";
import {
  getTextSizes,
  textLevels,
  listColorTokens,
} from "../../design-system/tokens";
import { List as AntdList } from "antd";
import { ListProps } from "./types";

export const StyledList = styled(AntdList as React.FC<ListProps>)`
  color: ${listColorTokens["list-default-color"]};
  ul {
    gap: 7px;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
  }
  ul li {
    list-style-type: ${({ type }) => type === "ol" && "none"};
  }
  ${getTextSizes(textLevels.LINK)}
`;