.bk-form-label {
  @apply !block !mb-10 !text-base !font-semibold !text-mono-900 !font-sans;
  @apply mt-20;
}

.bk-form-input {
  @apply !bg-white !border !border-mono-400 !text-mono-900 !rounded-md focus:!outline-none focus:!border-transparent !block !w-full !p-10 !font-sans !text-base;
  @apply focus:ring-[3px] focus:ring-accent-700;
}
.bk {
  .bk-checkbox,
  .bk-radio {
    @apply flex items-center cursor-pointer py-5 hover:text-accent-600 relative;
    input {
      @apply absolute opacity-0;
    }

    input:checked ~ span:before {
      @apply bg-accent-700;
    }
    span {
      @apply font-medium flex items-center;
      &:before {
        content: '';
        @apply shrink-0 w-[18px] h-[18px] text-accent-600 bg-mono-100 border border-mono-400 focus:ring-accent-100 focus:ring-2 outline-none rounded block mr-[6px];
      }
    }
  }

  .bk-radio {
    span:before {
      @apply rounded-full;
    }
    input:checked ~ span:before {
      box-shadow: inset 0 0 0 3px white;
    }
  }
  .bk-checkbox {
    input:checked ~ span:before {
      background-image: url(./../check.svg);
      background-size: 80% 80%;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }

  .bk-radio-list {
    @apply h-[410px] overflow-auto  mt-10;
  }

  .bk-form-section {
    &:not(:first-child) {
      @apply mt-30;
    }
  }

  .bk-form-group {
    @apply flex gap-5 my-20;
    > div {
      @apply flex-1;
    }
  }
}
