@import "../Shared/Globals.scss";

$checkbox-background: rgba(255, 255, 255, 0.2);
$checkbox-background-hover: darkgrey;
$checkbox-background-checked: $accent-color;
$checkbox-size: 0.75rem;

.option {
  position: relative;
  display: block;
  margin: 0.25rem;
  padding-left: 2rem;
  cursor: pointer;
  user-select: none;

  &:hover input ~ .checkmark {
    background-color: $checkbox-background-hover;
  }

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;

    &:checked ~ .checkmark {
      background-color: $checkbox-background-checked;

      &:after {
        display: block;
        left: calc(0.5 * #{$checkbox-size});
        top: calc(0.25 * #{$checkbox-size});
        width: calc(0.25 * #{$checkbox-size});
        height: calc(0.65 * #{$checkbox-size});
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
      }
    }
  }

  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(1.5 * #{$checkbox-size});
    width: calc(1.5 * #{$checkbox-size});
    background-color: $checkbox-background;

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