import styled from "styled-components/native";
import { colors } from "data/dataMx";

interface IStylesProps {
  colorShow?: colors;
}

export const Checkbox = styled.TouchableWithoutFeedback``;

export const CheckboxContainer = styled.View`
  width: 18px;
  height: 18px;
  border-width: 2px;
  border-color: ${({ colorShow }: IStylesProps) => colorShow};
  border-radius: 4px;
  position: relative;
`;

export const CheckboxContent = styled.View`
  width: 100%;
  height: 100%;
  background-color: ${({ colorShow }: IStylesProps) => colorShow};
`;

export const CheckboxCheckmarkLeft = styled.View`
  background-color: white;
  border-radius: 4px;
  width: 7px;
  height: 2px;
  position: absolute;
  left: 0px;
  bottom: 4px;
  transform: rotate(45deg);
`;

export const CheckboxCheckmarkRight = styled.View`
  background-color: white;
  width: 13px;
  height: 2px;
  position: absolute;
  border-radius: 4px;
  left: 3px;
  bottom: 6px;
  transform: rotate(130deg);
`;
