/*container for all swatches*/
.swatch-container{
 display:flex;
   width: 100%;
}

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 60px;
}


/* Swatch style */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: purple;
  margin: 10px
}

/*On mouse over effect**/
.container:hover input ~ .checkmark {
  border: 5px solid white;
  outline: 1px solid black;
}

/**On selected effect**/
.container input:checked ~ .checkmark {
  border: 5px solid white;
  outline: 1px solid black;
}