@import "./../styles/index.scss";

.checkmark-container {
  align-items: center;
  cursor: pointer;
  display: flex;
  position: relative;
}

.checkmark {
  height: 10px;
  width: 10px;
  border-radius: 3px;
  border: solid 2px #e3e3e3;
  margin-left: 0px;

  &:after{
    content: "";
    position: absolute;
    display: none;
  }
}

.checkmark-checked {
  background-color: #2196F3;
  border-color: #2196F3;

  &:after{
    display: block;
    left: 5px;
    top: 3px;
    width: 3px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    border-radius: 2px;
    transform: rotate(45deg);
  }
}

.checkmark-partial{
  background-color: #2196F3;
  border: none;
  height: 14px;
  width: 14px;

  &:after{
    display: block;
    left: 3px;
    top: -3px;
    width: 8px;
    height: 9px;
    border: solid white;
    border-width: 0 0px 2px 0;
  }
}

.checkmark-text{
  font-family: NunitoSans;
  font-size: 13px;
  font-weight: 200;
  margin-left: 12px;
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_COLOR_TEXT_CHECKBOX){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .checkmark-text{
      color: $_COLOR_TEXT_CHECKBOX;
    }
  }
}
  
@include themable($_THEME_LIGHT, $_COLOR_TEXT_CHECKBOX_LIGHT);
@include themable($_THEME_DARK, $_COLOR_TEXT_CHECKBOX_DARK);