@charset "utf-8";
@import "../../base/fn";

.ysui-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  font-size: 0;
  position: relative;
  border: none;
  background: transparent;
  outline: 0;
  margin: 0;
  &:before {
    content: ' ';
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAeFBMVEUAAAC3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7f///+3t7fLy8v6+vr09PTe3t7o6Oji4uLHx8fq6uq4uLjs7Oy5ubnGxsba696FAAAAGnRSTlMACPvd2eZyW09KEM24tYzuupyYIRwXi/Htz4ygUn0AAAFOSURBVEjHlZZpe4IwEIRjwn0VRW3N5ODS/v9/WNv0qVgEsvP5ZRlCdmfZf2VJVQdvnL8FdZVkbFW7uOCYiBfxbhmOQgDKXo2WUpurVQDCaOGBVACq03Ii3SlApK9KHwDVyplaBRxmLzjlgJUvZYH89Ew3AT6NXJDpETRT+iigtFyUVhDHie/c0Wt8/vC/R3+nV/ke+78TxGjkhsyI9NeKgJWbshDOTgQlPaQQ/RQP0frgLcLv8rEr7lM+vuMFOj+8Q8FYxqH9cA2escR58XOTsDOsL25RsRKDLz6gZAGML24QsHdoX1zjgwHSW+BEnGiG+KnUg6xIv4l4CYhXjHaBie1BbD5qa9MHB0tx2x5LN6T0oefsXLZH6mVHHdgPNQL9WhyIZhY241LYjMhPtCgjBeV6DA8uhodHDC+GfP0c8vUs5GcrxLl0K0R5nq8QX5hKqCg/H1h3AAAAAElFTkSuQmCC) no-repeat center;
    background-size: contain;
  }
  &:checked {
    &:before {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAArlBMVEUAAAD9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/9eD/////9fkj9ekH//Pr/+vf/8ev+2sr9e0T/9O/+yLD+vJ/+nnX9jl39iln/4tX/3tD+1cL+zLb+tpf+onz+mW7/9fH/7OX+0b3+xaz+waf9kWKNukD+AAAAHnRSTlMACPvd2XJbT+615s66uJiMShDgIRwX5ZyLSRHxz8tXNZtRAAABc0lEQVRIx5XWyXaCMBSA4SQEIpNIcdZeatVqqx1s7fT+L9Yo5YQkkMC/YvEtcjjkXpBaypKI9gjp0ShhKTKGvZhAJRJ7uBm7Y9Aau7hezxyozZnVYNyHxvpY1aNbMBSOZJ1RMEazqh7egKWbodA4BGuhOH8fWjQp9QBaNSg0dtpxB1+5Cy1zLxqP2/IAc+5Z0Gq/PkGRx3ls0W95voOiGKGUWHW+hyKSIgbGLvprBf8xNDXqvaQhQb5NvwoNPqLl4/F0VPX3RT+AiKJF+fiZn38tGnoIBM93kv/heitpIIJ/rLk/aFrhiwb/WGr5MBQkvzlU9B0oUelFPl19qV80DT5KoOrvuT82akgQA92fGjQwlBLNn7l+rtNkrn3A79w3aIjK6yF7XYvrgQPVb7b1OsDdrnbXwdF9LPEmnYYewku7XuKuA1uUOWbtZMqyCc3LpuMq0xtYFqW+hgMdBy42LPlIXvKRh5GxOZv6xS+EP2VzpPQHjbTDYxteGakAAAAASUVORK5CYII=) no-repeat center;
      background-size: contain;
    }
  }
  &:disabled {
    opacity: .5;
  }
}