/* *****************************************************************************
*
*  FORM
*
* ***************************************************************************** */

.form-checkbox {
  .form-checkbox__input {
    &:checked + .form-checkbox__label {
      &:before {
        border-color: $black;
        border-width: $custom-checkbox-border-width;
      }

      &:after {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  .form-checkbox__label {
    position: relative;
    padding-left: 2rem;
    font-weight: $font-weight-base;
    font-size: $legacy-font-size-base;

    @include hover-focus {
      cursor: pointer;
    }

    &:before {
      @include transitions(border-color);
      @extend .icon-box;
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      transform: translate(0%, 0%);
      background: $white;
    }

    &:after {
      @include transitions(opacity, transform $transition-time-medium $transition-ease-bounce);
      @include size(1.1rem);
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      background: url('/images/icons/svg-atoms/checkmark.svg') no-repeat;
      background-position: center;
      background-size: 60%;
      opacity: 0;
      transform: scale(0);
    }
  }
}