$checkbox-width: 20px;
$checkbox-height: $checkbox-width;
$checkbox-border-width: 2px;
$checkbox-border-color: $lightGray;
$checkbox-border-radius: 32%;
$checkbox-label-margin: 6px;

.form-element {
  .checkbox-group {
    display: flex;

    .label {
      font-size: 0.8rem;
      transition: all 0.25s ease;
      margin: 0;

      &:before {
        content: "";
        transition: all 0.25s ease;
        display: flex;
        border: $checkbox-border-width solid $checkbox-border-color;
        border-radius: $checkbox-border-radius;
        height: $checkbox-height;
        width: $checkbox-width;
        align-items: center;
        justify-content: center;
        margin-right: $checkbox-label-margin;
      }

      &:after {
        transition: all 0.25s ease;
        position: absolute;
        left: 8px;
        top: -2px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        content: "L";
        -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
        -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
        transform: scaleX(-1) rotate(-35deg);
        opacity: 0;
        color: $darkestGray;
      }
    }
  }
}

.checkbox {
  transition: all 0.25s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 100;
  cursor: pointer;

  &:hover ~ .label:before {
    background-color: $lightGray;
  }

  &:checked ~ .label {
    &:after {
      opacity: 1;
    }

    &:before {
      background-color: $lightGray;
    }
  }

  @each $color, $value in $colors {
    &.#{$color} {
      &:checked ~ .label {
        &:after {
          color: get-contrast($value);
        }

        &:before {
          background-color: $value;
          border-color: $value;
        }
      }

      &:checked {
        &:hover ~ .label {
          &:before {
            box-shadow: 0 3px 15px 0 tint($value, 65%);
          }
        }
      }

      &.flat {
        &:checked ~ .label {
          &:after {
            color: $value;
          }

          &:before {
            background-color: tint($value, 85%);
            border-color: tint($value, 85%);
          }
        }

        &:checked {
          &:hover ~ .label {
            &:before {
              box-shadow: 0 3px 15px 0 tint($value, 65%);
            }
          }
        }

        &:hover ~ .label:before {
          background-color: tint($value, 75%);
          border-color: tint($value, 75%);
        }
      }

      &.bordered {
        &:hover ~ .label:before {
          background-color: transparent;
          box-shadow: 0 3px 15px 0 tint($value, 65%);
        }

        &:checked ~ .label {
          &:after {
            color: $value;
          }

          &:before {
            background-color: transparent;
            border-color: rgba($value, 1);
          }
        }

        ~ .label:before {
          border-color: rgba($value, 1);
        }
      }

      &.hover-color {
        &:not(:checked):hover ~ .label:before {
          background-color: tint($value, 75%);
          border-color: tint($value, 75%);
        }
      }
    }
  }
}