import styled from "styled-components";
export const Container = styled.div `
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  user-select: none;
  -moz-user-select: none;
`;
export const CheckboxContainer = styled.div `
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-right: 12px;
  cursor: pointer;
  border-width: ${({ theme }) => theme?.new?.checkbox?.borderWidth};
  border-style: solid;
  border-radius: ${({ theme }) => theme?.new?.checkbox?.borderRadius};
  border-color: ${({ theme, active }) => active
    ? theme?.new?.checkbox?.activeColor
    : theme?.new?.checkbox?.defaultColor};

  background-color: ${({ theme, active }) => active ? theme?.new?.checkbox?.activeColor : "initial"};

  > svg path {
    fill: ${({ theme, active }) => active ? theme?.new?.checkbox?.icon?.activeColor : "initial"};
  }
`;
//# sourceMappingURL=checkbox.styled.js.map