import { Input } from "antd";
import styled, { css } from "styled-components";
import {
  controlColorTokens,
  getTextSizes,
  textLevels,
} from "../../design-system/tokens";

export const textAreaStyles = css`
  .ant-radio-inner::after {
    background-color: ${controlColorTokens["control-primary-color"]};
  }

  .ant-radio-checked .ant-radio-inner {
    border-color: ${controlColorTokens["control-primary-color"]};
  }

  &.error {
    border: 1px solid red;
  }

  ${getTextSizes(textLevels["SPAN"])};
`;

export const StyledTextArea = styled(Input.TextArea)`
  ${textAreaStyles}
`;