import styled from "styled-components";
const Checkbox = styled.div `
  position: relative;
  padding-left: 26px;
  min-width: 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: #233445;
  transition: 200ms ease-out;
  font-family: "Geometria", "Verdana", sans-serif;
  cursor: pointer;
  min-width: 16px;
  min-height: 16px;
  cursor: pointer;
  &:before {
    background: #ffffff;
    content: " ";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: 200ms ease-out;
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 1px solid #dde3eb;
    border-radius: 4px;
  }
  &:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    z-index: 3;
    opacity: 0;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3097 0.894805C11.6242 1.16437 11.6606 1.63785 11.391 1.95234L5.12395 9.26393L0.698592 5.57613C0.380384 5.31095 0.337391 4.83803 0.602564 4.51982C0.867737 4.20161 1.34066 4.15862 1.65887 4.42379L4.94779 7.16456L10.2521 0.976153C10.5217 0.661659 10.9952 0.625238 11.3097 0.894805Z' fill='white'/%3E%3C/svg%3E%0A");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
  }
  ${(props) => props.active
    ? `
        &:before {
          background: #3897F9;
          border: 1px solid #3897F9;
        }
        &:after {
          opacity: 1;
        }
  `
    : ``}

  ${(props) => props.disable
    ? `
        &:before {
          background: #919CA7;
        }
        &:after {
          opacity: 1;
        }
  `
    : ``}
`;
export default Checkbox;
//# sourceMappingURL=checkbox.styled.js.map