.checkbox-container {
  width: 100%;

  & > label {
    position: relative;
    @include display-flex(initial, center);
    cursor: pointer;
    width: 100%;
  }

  input {
    height: 0;
    opacity: 0;
    position: absolute;

    & ~ .checkbox-display-container {
      width: 100%;
      transition: all ease-in-out 0.3s;
      @include display-flex(flex-start);

      .checkbox-display {
        @include display-flex(center, center);
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 1px solid $light-grey;
        background: $white;
        transition: all ease-in-out 0.3s;
        position: relative;

        &::after {
          position: absolute;
          content: "";
          height: 2px;
          background: $white;
          width: 14px;
          opacity: 0;
          transition: all ease-in-out 0.3s;
        }

        img,
        svg {
          transition: all ease-in-out 0.3s;
          opacity: 0;
          width: 12px;
        }
      }
    }

    &:checked {
      & ~ .checkbox-display-container {
        .checkbox-display {
          background: $primary;
          border-color: $primary;

          img,
          svg {
            opacity: 1;
          }
        }
      }
    }
  }

  .checkbox-label {
    margin-left: 16px;

    &--boxed {
      margin-left: 0;
      margin-right: 16px;
    }
  }

  &--boxed {
    input {
      & ~ .checkbox-display-container {
        border: 1px solid $light-grey;
        background-color: white;
        @include display-flex();
        padding: 14px;
        border-radius: 6px;
      }

      &:checked {
        & ~ .checkbox-display-container {
          box-shadow: $popper-shadow;
          border-color: $primary;
        }
      }
    }
  }

  &__partial {
    & > label {
      input {
        & ~ .checkbox-display-container {
          .checkbox-display {
            background: $primary;
            border-color: $primary;

            &::after {
              opacity: 1;
            }
          }
        }

        &:checked {
          & ~ .checkbox-display-container {
            .checkbox-display {
              &::after {
                opacity: 0;
              }
            }
          }
        }
      }
    }
  }

  &__circular {
    & > label {
      input {
        & ~ .checkbox-display-container {
          .checkbox-display {
            border-radius: 50%;
          }
        }
      }
    }
  }

  &.disabled {
    pointer-events: none;

    .checkbox-display {
      background: $light;
      pointer-events: none;
    }

    .checkbox-label {
      opacity: 0.5;
    }
  }
}

.sm-checkbox {
  & > label {
    input {
      & ~ .checkbox-display-container {
        .checkbox-display {
          width: 16px;
          height: 16px;

          img,
          svg {
            width: 10px;
          }
        }
      }
    }
  }
}