lego-checkbox {

  div {
    position: relative;
    display: inline-block;

    input {
      position: absolute;
      opacity: 0;

      & + label {
        position: relative;
        cursor: pointer;
        padding: 0;
        font-size: $font-size-base;
        font-weight: $font-weight-normal;
        color: $text-gray;
        user-select: none;
        margin-right: 0.5rem;
      }

      & + label:before {
        position: relative;
        top: -1px;
        content: '';
        margin-right: 0.25rem;
        vertical-align: middle;
        width: 1.5rem;
        height: 1.5rem;
        display: inline-block;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjIgKDY3MTQ1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5VbnRpdGxlZCAyPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTAuODg4ODg4ODg5LDAuODg4ODg4ODg5IEwwLjg4ODg4ODg4OSwxNS4xMTExMTExIEwxNS4xMTExMTExLDE1LjExMTExMTEgTDE1LjExMTExMTEsMC44ODg4ODg4ODkgTDAuODg4ODg4ODg5LDAuODg4ODg4ODg5IFogTTAuODg4ODg4ODg5LDAgTDE1LjExMTExMTEsMCBDMTUuNjAyMDMwOSwwIDE2LDAuMzk3OTY5MTExIDE2LDAuODg4ODg4ODg5IEwxNiwxNS4xMTExMTExIEMxNiwxNS42MDIwMzA5IDE1LjYwMjAzMDksMTYgMTUuMTExMTExMSwxNiBMMC44ODg4ODg4ODksMTYgQzAuMzk3OTY5MTExLDE2IDAsMTUuNjAyMDMwOSAwLDE1LjExMTExMTEgTDAsMC44ODg4ODg4ODkgQzAsMC4zOTc5NjkxMTEgMC4zOTc5NjkxMTEsMCAwLjg4ODg4ODg4OSwwIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9IjAuOCI+CiAgICAgICAgPGcgaWQ9IkNoZWNrYm94LU5vbmUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZGRkZGIiB4PSI0IiB5PSI0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJub25lLWEtbGluayIgZmlsbD0iIzk3OTc5NyIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAuODg4ODg4ODg5LDAuODg4ODg4ODg5IEwwLjg4ODg4ODg4OSwxNS4xMTExMTExIEwxNS4xMTExMTExLDE1LjExMTExMTEgTDE1LjExMTExMTEsMC44ODg4ODg4ODkgTDAuODg4ODg4ODg5LDAuODg4ODg4ODg5IFogTTAuODg4ODg4ODg5LDAgTDE1LjExMTExMTEsMCBDMTUuNjAyMDMwOSwwIDE2LDAuMzk3OTY5MTExIDE2LDAuODg4ODg4ODg5IEwxNiwxNS4xMTExMTExIEMxNiwxNS42MDIwMzA5IDE1LjYwMjAzMDksMTYgMTUuMTExMTExMSwxNiBMMC44ODg4ODg4ODksMTYgQzAuMzk3OTY5MTExLDE2IDAsMTUuNjAyMDMwOSAwLDE1LjExMTExMTEgTDAsMC44ODg4ODg4ODkgQzAsMC4zOTc5NjkxMTEgMC4zOTc5NjkxMTEsMCAwLjg4ODg4ODg4OSwwIFoiIGlkPSJub25lLWEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNsaXBwZWQiPgogICAgICAgICAgICAgICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJub25lLWEiPjwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiBtYXNrPSJ1cmwoI21hc2stMikiIGZpbGw9IiM1OTVENzAiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDAwMDAwLCAtMy4wMDAwMDApIiBpZD0iUmVjdGFuZ2xlIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB4PSIwLjMzMyIgeT0iMC4zMzMiIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
      }

      &:checked + label:before {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMmYzZTViIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiNGRkYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgNCkiPjwvcmVjdD4gIDxwYXRoIGQ9Ik0xOSwzIEw1LDMgQzMuODksMyAzLDMuOSAzLDUgTDMsMTkgQzMsMjAuMSAzLjg5LDIxIDUsMjEgTDE5LDIxIEMyMC4xMSwyMSAyMSwyMC4xIDIxLDE5IEwyMSw1IEMyMSwzLjkgMjAuMTEsMyAxOSwzIEwxOSwzIFogTTEwLDE3IEw1LDEyIEw2LjQxLDEwLjU5IEwxMCwxNC4xNyBMMTcuNTksNi41OCBMMTksOCBMMTAsMTcgTDEwLDE3IFoiLz48L3N2Zz4=);
      }

      &:checked:disabled + label:before {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjIgKDY3MTQ1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5VbnRpdGxlZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGQ9Ik0xNC4yMjIyMjIyLDAgTDEuNzc3Nzc3NzgsMCBDMC43OTExMTExMTEsMCAwLDAuOCAwLDEuNzc3Nzc3NzggTDAsMTQuMjIyMjIyMiBDMCwxNS4yIDAuNzkxMTExMTExLDE2IDEuNzc3Nzc3NzgsMTYgTDE0LjIyMjIyMjIsMTYgQzE1LjIwODg4ODksMTYgMTYsMTUuMiAxNiwxNC4yMjIyMjIyIEwxNiwxLjc3Nzc3Nzc4IEMxNiwwLjggMTUuMjA4ODg4OSwwIDE0LjIyMjIyMjIsMCBaIE02LjIyMjIyMjIyLDEyLjQ0NDQ0NDQgTDEuNzc3Nzc3NzgsOCBMMy4wMzExMTExMSw2Ljc0NjY2NjY3IEw2LjIyMjIyMjIyLDkuOTI4ODg4ODkgTDEyLjk2ODg4ODksMy4xODIyMjIyMiBMMTQuMjIyMjIyMiw0LjQ0NDQ0NDQ0IEw2LjIyMjIyMjIyLDEyLjQ0NDQ0NDQgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkNoZWNrYm94LWRpc2FibGVkLWNoZWNrIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDAwMDAsIDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImNoZWNrYm94LWRpc2FibGVkLWNoZWNrLWEtbGluayIgZmlsbD0iI0NDQ0NDQyIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LjIyMjIyMjIsMCBMMS43Nzc3Nzc3OCwwIEMwLjc5MTExMTExMSwwIDAsMC44IDAsMS43Nzc3Nzc3OCBMMCwxNC4yMjIyMjIyIEMwLDE1LjIgMC43OTExMTExMTEsMTYgMS43Nzc3Nzc3OCwxNiBMMTQuMjIyMjIyMiwxNiBDMTUuMjA4ODg4OSwxNiAxNiwxNS4yIDE2LDE0LjIyMjIyMjIgTDE2LDEuNzc3Nzc3NzggQzE2LDAuOCAxNS4yMDg4ODg5LDAgMTQuMjIyMjIyMiwwIFogTTYuMjIyMjIyMjIsMTIuNDQ0NDQ0NCBMMS43Nzc3Nzc3OCw4IEwzLjAzMTExMTExLDYuNzQ2NjY2NjcgTDYuMjIyMjIyMjIsOS45Mjg4ODg4OSBMMTIuOTY4ODg4OSwzLjE4MjIyMjIyIEwxNC4yMjIyMjIyLDQuNDQ0NDQ0NDQgTDYuMjIyMjIyMjIsMTIuNDQ0NDQ0NCBaIiBpZD0iY2hlY2tib3gtZGlzYWJsZWQtY2hlY2stYSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iQ2xpcHBlZCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvbWFzaz4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImNoZWNrYm94LWRpc2FibGVkLWNoZWNrLWEiPjwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiBtYXNrPSJ1cmwoI21hc2stMikiIGZpbGw9IiNDQ0NDQ0MiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDAwMDAwLCAtMy4wMDAwMDApIiBpZD0iUmVjdGFuZ2xlIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB4PSIwLjMzMyIgeT0iMC4zMzMiIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
      }

      &:disabled + label:before {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjIgKDY3MTQ1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5VbnRpdGxlZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxyZWN0IGlkPSJwYXRoLTEiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjEiPjwvcmVjdD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDaGVja2JveC1kaXNhYmxlIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDAwMDAsIDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjOTc5Nzk3IiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iMSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJDbGlwcGVkIj4KICAgICAgICAgICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iY2hlY2tib3gtZGlzYWJsZS1hIj48L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjRjFGMUYxIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjAwMDAwMCwgLTMuMDAwMDAwKSIgaWQ9IlJlY3RhbmdsZSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgeD0iMC4zMzMiIHk9IjAuMzMzIiB3aWR0aD0iMjEiIGhlaWdodD0iMjEiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJjaGVja2JveC1kaXNhYmxlLWMtbGluayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDAwMDAsIDQuMDAwMDAwKSIgZmlsbD0iI0NDQ0NDQyIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMC44ODg4ODg4OSwwLjg4ODg4ODg5IEwwLjg4ODg4ODg5LDE1LjExMTExMTEgTDE1LjExMTExMTEsMTUuMTExMTExMSBMMTUuMTExMTExMSwwLjg4ODg4ODg5IEwwLjg4ODg4ODg5LDAuODg4ODg4ODkgWiBNMC44ODg4ODg4OSwwIEwxNS4xMTExMTExLDAgQzE1LjYwMjAzMDksMCAxNiwwLjM5Nzk2OTExIDE2LDAuODg4ODg4ODkgTDE2LDE1LjExMTExMTEgQzE2LDE1LjYwMjAzMDkgMTUuNjAyMDMwOSwxNiAxNS4xMTExMTExLDE2IEwwLjg4ODg4ODg5LDE2IEMwLjM5Nzk2OTExLDE2IDAsMTUuNjAyMDMwOSAwLDE1LjExMTExMTEgTDAsMC44ODg4ODg4OSBDMCwwLjM5Nzk2OTExIDAuMzk3OTY5MTEsMCAwLjg4ODg4ODg5LDAgWiIgaWQ9ImNoZWNrYm94LWRpc2FibGUtYyI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
      }

      &:focus + label:before {
        outline: -webkit-focus-ring-color auto 5px;
        //TODO: Test in IE-Edge and Provide focus for Edge
      }

      &:disabled + label, &:checked:disabled + label {
        cursor: default;
      }
    }
  }
}