import styled from "styled-components";

// export const sizes = {
//   xs: {
//     height: "4px",
//     width: "4px",
//   },
//   sm: {
//     height: "8px",
//     width: "8px",
//   },
//   md: {
//     height: "14px",
//     width: "14px",
//   },
//   lg: {
//     height: "16px",
//     width: "16px",
//   },
//   xl: {
//     height: "20px",
//     width: "20px",
//   },
// };

export const CheckboxWrapper = styled.label`
  display: flex;
  align-items: center;
  cursor: pointer;
`;

export const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
  position: absolute;
  opacity: 0;
  cursor: pointer;
`;

export const CheckboxControl = styled.span`
  position: relative;
  display: inline-block;
  height: ${(props) => (props.size || "24px")};
  width: ${(props) => (props.size || "24px")};
  border: 2px solid
    ${(props) => (props.checked ? props.color : "rgba(159, 159, 159, 0.365)")};
  background-color: ${(props) => (props.checked ? props.color : "transparent")};
  border-radius: 4px;
  transition: all 0.2s ease-in-out;

  & svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: ${(props) => (props.checked ? "#fff" : "transparent")};
    transition: all 0.2s ease-in-out;
  }
`;

export const CheckboxLabel = styled.span`
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  color: ${(props) => (props.checked ? props.color : "initial")};
`;