@simply-fin-services/astronomix/lib/components/Checkbox/style.scss

@import '../../styles/mixins.scss';

.s-checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;

  .s-checkbox {
    cursor: pointer;
    height: 31px;
    width: 49px;
    background: s-color(neutral, 000);
    border-radius: 15px;
    border: 1px solid s-color(neutral, 400);
    box-sizing: border-box;
    position: relative;
  }

  .s-checkmark {
    cursor: pointer;
    height: 20px;
    width: 20px;
    background-color: s-color(neutral, 000);
    border-radius: 2px;
    border: 1px solid s-color(primary, 400);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: s-color(neutral, 000);
    margin-right: s-space(tight);
  }

  .s-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

  .s-checkmark:after {
    left: 9px;
    top: 5px;

  }

  input[type=checkbox]:checked ~ .s-checkmark {
    background: s-color(primary, 400);
  }

  input[type=checkbox]:checked ~ .s-checkmark:after {
    display: block;
  }

  input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
  }
}