.gra-checkbox {
  .gra-custom-form-label {
    &::before {
      border-radius: $border-radius;
    }

    &::after {
      top: 4px;
      left: 5px;
      width: 0.6rem;
      height: 1.1rem;
      border-right: 2px solid $white;
      border-bottom: 2px solid $white;
      border-radius: $border-radius;
      transform: rotate(-45deg) scale(0);
      transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;
      @include moder($modes) {
        border-color: mode("colorBackground");
      }
    }
  }

  .gra-custom-form-input {
    &:checked ~ .gra-custom-form-label::before {
      border: 0;
      background: $color-main;
      @include moder($modes) {
        background-color: mode("colorMain");
      }
    }

    &:checked ~ .gra-custom-form-label::after {
      opacity: 1;
      transform: rotate(45deg) scale(1);
    }
  }
}