.checkbox {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.checkbox__input {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: text-bottom;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-white);
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
  appearance: none;
  cursor: pointer;
}

.checkbox__input:hover {
  border-color: var(--color-border-dark);
  box-shadow: inset 0 0 0 1px var(--color-border-dark);
}

.checkbox__input:focus {
  box-shadow: var(--focus-box-shadow);
}

.checkbox__input:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
}

.checkbox__input:disabled {
  cursor: not-allowed;
  border-color: var(--color-border);
  background-color: var(--color-disabled);
  box-shadow: none;
}

.checkbox__input:checked:disabled {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23bababf'/%3E%3C/svg%3E");
}

/* Sizes. */
.checkbox--size--sm .checkbox__input {
  width: 14px;
  height: 14px;
}

.checkbox--size--lg .checkbox__input {
  width: 22px;
  height: 22px;
}

.checkbox--disabled {
  cursor: not-allowed;
}