@import "../settings/variables";
@import "../tools/typography";

.checkbox {
  display: block;
  line-height: 1;
  position: relative;

  & + & {
    margin-top: $checkbox-track-spacing-vertical;
  }

  &__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
  }

  &__label {
    @include sm-medium--primary();
    cursor: default;
    display: block;
    min-height: $checkbox-track-size;
    padding-left: $checkbox-track-label-padding-left;
    position: relative;
    user-select: none;

    &:before {
      background-color: $checkbox-track-background-color;
      border: $checkbox-track-border-settings;
      border-radius: $checkbox-track-border-radius;
      content: "";
      display: inline-block;
      height: $checkbox-track-size;
      left: 0;
      min-width: $checkbox-track-size;
      position: absolute;
      top: 0;
      width: $checkbox-track-size;
    }
  }

  &__input--error + &__label:before {
    border-color: $checkbox-track-error-border-color;
  }

  &__input:checked + &__label {
    position: relative;

    &:before {
      background-color: $checkbox-track-checked-background-color;
      border-color: $checkbox-track-checked-border-color;
      color: $checkbox-track-checked-color;
    }

    &:after {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik00MzMuNzkyIDcwNGwtMTc3Ljc5Mi0xNzIuNDE2IDY4LjkyOC01OS45NjggMTA4Ljg2NCAxMDUuNiAyNjUuMjgtMjU3LjIxNiA2OC45MjggNTkuOTY4eiI+PC9wYXRoPjwvc3ZnPg==");
      content: "";
      height: $checkbox-track-size-checked;
      left: 0;
      position: absolute;
      top: 0;
      width: $checkbox-track-size-checked;
    }
  }

  &__input:focus + &__label:before {
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
  }

  &__input:indeterminate + &__label:before,
  &__input:indeterminate:checked + &__label:before,
  &__input--indeterminate + &__label:before,
  &__input--indeterminate:checked + &__label:before {
    background-color: $checkbox-track-indeterminate-background-color;
    border-color: $checkbox-track-indeterminate-border-color;
    color: $checkbox-track-indeterminate-color;
  }

  &__input:indeterminate + &__label:after,
  &__input:indeterminate:checked + &__label:after,
  &__input--indeterminate + &__label:after,
  &__input--indeterminate:checked + &__label:after {
    background-color: $checkbox-toggle-indeterminate-color;
    content: "";
    height: 2px;
    left: 5px;
    position: absolute;
    top: 9px;
    width: 10px;
  }

  &__input:disabled + &__label:before {
    background-color: $checkbox-track-disabled-background-color;
    border-color: $checkbox-track-disabled-border-color;
  }

  &__input:disabled:checked + &__label:before {
    background-color: $checkbox-track-checked-disabled-background-color;
    border-color: $checkbox-track-checked-disabled-border-color;
  }
}